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ư sau:


<html>
<body>

<!-- Các phần tử khác trên trang -->
...
<div id="content-partial">
    <h3>...</h3>
    <p>...</p>
</div> 
...
<!-- Các phần tử khác trên trang -->
</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 :).

Nội dung không được để trống

Bài Viết Liên Quan