Lấy HTML Của Phần Tử Bao Gồm Cả Phần Tử Mẹ
Đợt vừa rồi khi code frontend cho dự án trên công ty mình đùng phải một task trong đó cần phải lấy ra HTML của một phần tử cho trước nhưng bao gồm cả phần tử mẹ. Mình sẽ minh họa cụ thể bằng code để mọi người dễ hình dung. Sau khi gửi Ajax request lên server thì mình server trả về code HTML như ...
Đợt vừa rồi khi code frontend cho dự án trên công ty mình đùng phải một task trong đó cần phải lấy ra HTML của một phần tử cho trước nhưng bao gồm cả phần tử mẹ. Mình sẽ minh họa cụ thể bằng code để mọi người dễ hình dung.
Sau khi gửi Ajax request lên server thì mình server trả về code HTML như sau:
<html>
<body>
...
<div id="content-partial">
<h3>...</h3>
<p>...</p>
</div>
...
</body>
</html>
Nhiệm vụ tiếp theo cần làm đó là lấy toàn bộ mã HTML Trong phần từ div#content-partial. Ban đầu mình sử dụng jQuery như sau:
$('#content-partial').html();
Tuy nhiên đoạn code jQuery trên chỉ trả về mã HTML nằm bên trong thẻ div#content-partial trong khi yêu cầu ở đây là cần phải lấy ra HTML của cả phần tử div#content-partial bao gồm cả thẻ <div id="content-partial">.
Tìm trên document của jQuery thì mình được biết là chưa có API nào hỗ trợ việc lấy ra HTML của phần tử hiện tại bao gồm cả thẻ bao ngoài như trường hợp này.
Bạn thử dừng lại vài giây để nghĩ xem giải pháp cho trường hợp này sẽ là gì.
Sau một số giờ Google thì cuối cùng mình tìm ra solution cho trường hợp này như sau:
$('#content-partial').get(0).outerHTML();
Hoặc để tránh gặp phải lỗi khi phần tử div#content-partial không tồn tại:
var docElement = $('#content-partial').get(0);
var htmlContent = docElement ? docElement.outerHTML() : ';
Đây là solution của mình, nếu mọi người có cách làm khác thì cứ comment thoải mái ở phía dưới :).
