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

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);

如果你有很多新内容,这将是缓慢的.您可以通过在新内容上创建一个Range,将其提取到DocumentFragment并将该片段一次性插入目标节点,从而加速支持DOM Range的浏览器.

不幸的是(再次),无论你是否正在使用insertAdjacentHTML或者innerHTML,有些元素IE <9都不会设置HTML:最显着的是<table>它的关系.因此,在这种情况下,您必须在适当的元素名称包装中包围HTML:

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

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

关于这个的好处是,有桌子,如果你有很多的新行,你可以把它们放在一个单一的<tbody>和insertBefore/ appendChild该机构把所有的行中一气呵成,这是快于一个接一个.