将 HTML 字符串解析为 DOM 的 Javascript 函数？

Question

有没有好的JS函数或者类，可以在不重置现有内容的情况下，将一串HTML无缝解析成DOM？我正在尝试找到一种简单的方法来复制表格顶部的复杂表格行。

它显然会像这样工作:

element.innerHTML = newHTML + element.innerHTML;

但是，这会导致浏览器重新加载整个表格，从而重置滚动位置并删除表格中所有未保存的可编辑内容。

更新:

我没有在这个项目中使用 jQuery。这是我在某处找到的一个想法，但我无法让它发挥作用:

var templateRow = document.getElementById( 'templateRow' );
var newhtml = "<tr id='row"+lastID+"'>"+'templateRow'.innerHTML+"</tr>";
var range = document.createRange();
range.selectNode( 'templateRow' );
var parsedHTML = range.createContextualFragment( newhtml );
templateRow.appendChild( parsedHTML )

Answer 1

您是否正在尝试将内容插入现有元素，而不干扰其中已有的内容？

最直接的答案是 insertAdjacentHTML .这是一个 IE 脚本扩展，因为由 HTML5 标准化:

mydiv.insertAdjacentHTML('afterBegin', '<p>Some new stuff</p><p>to prepend</p>');

不幸的是，它并没有在所有地方实现。所以在别处你必须创建一个新元素，设置 innerHTML然后将内容传输到目标:

var container= document.createElement('div');
container.innerHTML= '<p>Some new stuff</p><p>to prepend</p>';
while (container.lastChild)
    mydiv.insertBefore(container.lastChild, mydiv.firstChild);

如果您有很多新内容，这会很慢。您可以在支持 DOM Range 的浏览器上加速它，方法是在新内容上创建一个 Range，将其提取到 DocumentFragment 并将该片段一次性插入到目标节点中。

不幸的是(再次)，无论您使用的是insertAdjacentHTML或 innerHTML , IE <9 不会设置 HTML 的元素:最值得注意的是 <table>及其关系。因此，在这种情况下，您必须将 HTML 包裹在适合元素名称的包装器中:

container.innerHTML= '<table><tbody>'+newRowsHTML+'</tbody></table>';

然后从内部元素中提取内容放入目标。

这样做的好处是，如果您有很多新行，您可以使用表格将它们放在一个 <tbody> 中。和 insertBefore/appendChild那个 body 一次性把所有的行都放进去，这比一个接一个地快。