2012-02-17 89 views
5

有没有办法将标记字符串转换为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>")) 

+1

我很好奇为什么设置innerHTML不适合你。设置innerHTML后,您可以通过查询您的divOne来获取结果元素。 – akonsu 2012-02-17 20:08:16

+0

@akonsu,据说你在divOne中有,在这个div之外你有一个onclick = innerHTML-method的按钮。现在,在FF10和IE9(使用文档模式IE9)中输入文本框中的内容并按下按钮,输入的值将被重置!我试图看到appendChild会发生同样的事情。顺便说一句,在IE8兼容模式下,输入元素的值是持久的。 – 2012-02-17 20:17:51

+0

你是说如果你有一个文本输入框和一个按钮,当你按下按钮时,输入框的值会被清除?你可以证明这一点,比如jsbin.com? – akonsu 2012-02-17 20:26:34

回答

15

现在还没有一个现有的跨浏览器功能。下面的方法可用于实现期望的效果(使用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>" 
); 
+0

丹迪!感谢这个出色的解决方法。 – 2012-02-17 20:42:34

2

是的,可以去做。

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

旧的IE版本会抱怨这一点,因为它们无法处理在某些元素上设置'innerHTML'属性,包括'

'。另请参阅[本文](http://support.microsoft.com/kb/239832)。 – 2012-02-17 20:31:10