Tạo nút từ chuỗi đánh dấu

Question

Có cách nào để chuyển đổi chuỗi đánh dấu thành đối tượng nút trong JavaScript không? Thật sự tôi đang tìm kiếm các subsitute cho:

document.getElementById("divOne").innerHTML += "<table><tbody><tr><td><input type='text' value='0' /></td></tr></tbody></table>" 

cái gì đó như

document.getElementById("divOne").appendChild(document.createNodeFromString("<table><tbody><tr><td><input type='text' value='0' /></td></tr></tbody></table>")) 

sử dụng createNodeFromString thay vì tạo ra các yếu tố bảng sau đó nối phần tử con của nó sau đó đính kèm các thuộc tính tương ứng và giá trị của họ!

Answer 1

Không có chức năng trình duyệt chéo hiện có cho việc này. Các phương pháp sau đây có thể được sử dụng để đạt được hiệu quả mong muốn (sử dụng một DocumentFragment cho một hiệu suất tối ưu hóa, dựa trên this answer):

function appendStringAsNodes(element, html) { 
    var frag = document.createDocumentFragment(), 
     tmp = document.createElement('body'), child; 
    tmp.innerHTML = html; 
    // Append elements in a loop to a DocumentFragment, so that the browser does 
    // not re-render the document for each node 
    while (child = tmp.firstChild) { 
     frag.appendChild(child); 
    } 
    element.appendChild(frag); // Now, append all elements at once 
    frag = tmp = null; 
} 

sử dụng (indention cho dễ đọc):

appendStringAsNodes(
    document.getElementById("divOne"), 
    "<table><tbody><tr><td><input type='text' value='0' /></td></tr></tbody></table>" 
); 

Answer 2

Vâng, bạn có thể làm việc đó đi.

var myNewTable = document.createElement("table"); 
myNewTable.innerHTML = "<tbody><tr><td><input type='text' value='0' /></td></tr></tbody>" 
document.getElementById("divOne").appendChild(myNewTable);