Tạo chuỗi từ HTMLDivElement

Question

Điều tôi muốn làm là tạo chuỗi từ đối tượng HTMLElement HTML. Ví dụ:

var day = document.createElement("div"); 
day.className = "day"; 
day.textContent = "Random Text"; 

Bây giờ chúng tôi đã tạo ra đối tượng HTML2 có thể làm cho nó in dưới dạng chuỗi? ví dụ.

<div class="day">Random Text</div> 

Answer 1

Biến thể trên trình bao bọc của Gump, kể từ khi triển khai của anh ta nâng nút đích ra khỏi tài liệu.

function nodeToString (node) { 
    var tmpNode = document.createElement("div"); 
    tmpNode.appendChild(node.cloneNode(true)); 
    var str = tmpNode.innerHTML; 
    tmpNode = node = null; // prevent memory leaks in IE 
    return str; 
} 

Để in chuỗi kết quả trên màn hình (re: thoát)

var escapedStr = nodeToString(node).replace("<" , "&lt;").replace(">" , "&gt;"); 
outputNode.innerHTML += escapedStr; 

Lưu ý, các thuộc tính như "lớp học", "id", vv được chuyển đổi thành chuỗi đúng là có vấn đề.

Answer 2

Tại sao bạn sử dụng createElement nếu bạn cũng có thể phân tích cú pháp chuỗi trực tiếp? Giống như: var string = '<div class="' + class + '">' + text + '</div>';

Answer 3

Bạn cần phải tạo nút văn bản để thêm văn bản cho các phần tử tạo của bạn như thế này:

var day = document.createElement("div"); 
day.className = "day"; 
// create text node 
var txt = document.createTextNode('Random Text'); 
// add text to div now 
day.appendChild(txt); 
// append to body 
document.body.appendChild(day); 

Answer 4

Bạn có thể sử dụng chức năng này (lấy từ pure.js)

function outerHTML(node){ 
return node.outerHTML || new XMLSerializer().serializeToString(node); 
} 

Answer 5

Bạn có thể bọc phần tử đó vào phần tử khác và sử dụng innerHTML trên đó:

var wrapper = document.createElement("div"); 
wrapper.appendChild(day); 
var str = wrapper.innerHTML;