Javascript函数将HTML字符串解析成DOM？ [英] Javascript function to parse HTML string into DOM?

问题描述

有没有一个很好的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）
  

解决方案

您尝试将内容插入现有元素，而不会打扰已经存在的内容？

最简单的答案是 insertAdjacentHTML 。这是一个IE脚本扩展，由HTML5标准化：

  mydiv.insertAdjacentHTML（'afterBegin'，'< p>新的东西< / p>< p>添加到< / p>'）; 
  

不幸的是，它无法实现。所以在其他地方你必须创建一个新的元素，设置 innerHTML ，然后将内容传输到目标：

  var container = document.createElement（'div'）; 
 container.innerHTML ='< p>一些新的东西< / p>< p>添加到< / p>'; 
 while（container.lastChild）
 mydiv.insertBefore（container.lastChild，mydiv.firstChild）; 
  

如果你有很多新内容，这将很慢。您可以在支持DOM Range的浏览器上加快速度，将范围扩展到新内容，将其解压缩到DocumentFragment，然后一次将该片段插入目标节点。

不幸的是（再次），无论你是使用 insertAdjacentHTML 还是 innerHTML ，有IE< 9赢得' t设置HTML：最引人注目的是< table> 及其关系。所以在这种情况下，你必须在适当的包装器中包含元素名称：

  container.innerHTML ='<表>< TBODY> '+ newRowsHTML +' < / tbody的>< /表>'; 
  

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

关于这一点的好处是，如果你有很多新行可以将它们放在一个< tbody> 和 insertBefore / appendChild 该主体将所有行放在一起，这比一个接一个地快，一个。

Is there a good JS function or class that can seamlessly parse a string of HTML into the DOM without resetting existing content? I'm trying to find an easy way to duplicate a complicated table row at the top of the table.

It obviously will work like this:

element.innerHTML = newHTML + element.innerHTML;

However, this causes the browser to reload the entire table which resets the scroll position and deletes any unsaved editable content in the table.

UPDATE:

I'm not using jQuery for this project. Here's an idea I found somewhere but I cant get it working:

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 )

解决方案

Are you attempting to insert content into an existing element, without disturbing the content that's already in there?

The most straightforward answer is insertAdjacentHTML. This is an IE scripting extension, since standardised by HTML5:

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

Unfortunately it is not implemented everywhere. So elsewhere you have to create a new element, set innerHTML on it and then transfer the contents to the target:

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

If you have a lot of new content, this will be slow. You can speed it up on browsers that support DOM Range by making a Range over the new content, extracting it to a DocumentFragment and inserting that fragment into the target node in one go.

Unfortunately (again), whether you are using insertAdjacentHTML or innerHTML, there are elements that IE<9 won't set HTML on: most notably <table> and its relations. So in that case you have to surround the HTML in a suitable wrapper for the element name:

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

and then extract the contents from the inner element to put in the target.

The good thing about this is that with tables if you have a lot of new rows you can put them in a single <tbody> and insertBefore/appendChild that body to put all the rows in in one go, which is quicker than one-by-one.

这篇关于Javascript函数将HTML字符串解析成DOM？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！