從標記字符串創建節點

Question

有沒有辦法將標記字符串轉換爲JavaScript中的節點對象？其實我在尋找替補多爲：

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

像

使用createNodeFromString而創建表元素，然後追加其子元素再附上各自的屬性和值

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

！

Answer 1

現在還沒有一個現有的跨瀏覽器功能。下面的方法可用於實現期望的效果（使用DocumentFragment用於優化的性能，基於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; 
} 

用法（縮進表示可讀性）：

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

Answer 2

是的，可以去做。

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