DEMO

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＆lt; 9都不会设置HTML的元素：最值得注意的是<table>及其关系。因此，在这种情况下，您必须在适当的元素名称包装器中包围HTML：

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

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

关于这一点的好处是，对于表格，如果你有很多新行，你可以将它们放在一个<tbody>和insertBefore / appendChild那个正文中一行中的行，比一个一个快。

Answer 2

^{免责声明：我现在不用jQuery编写代码。因为我讨厌在这个浏览器上使用属性A和在这个浏览器上使用属性B之间追逐浏览器怪癖。也就是说，这适用于Firefox，但更多的是关于降低概念。我只想尽可能地保持领先。}

DEMO

基本上，您可以执行以下操作：

让您的<table>包含您不希望与之混淆的所有“原始”/“无污染”数据。 ^[表1]
有一个字符串，其中包含您需要在此原始表中插入的其他数据，而不会对table1上已经发生的事情进行操作（或以其他方式阻碍）。 ^{[的sampleData]}
创建一个新的<table> ^[table2]并将其添加到文档中（但请将其设置为完全不可见）。根据字符串的内容，您可以使用<div>，但无论您采用哪种方法，它都应该是不可见的（毕竟，我们使用它的所有方法都是使用{{1来解析html字符串的能力） }}）。
现在获取新innerHTML ^[table2]（或<table>）的内容，并使用javascript和DOM将这些项目推送到新表中。

这将避免在新表上再次使用<div>，强制重新加载并丢失已经发生的任何事情。

Answer 3

使用例如jQuery（具体方法的文档 - 带有示例 - 是here）：

var your_html_code = '<table>...</table>';

然后像这样使用它：

jQuery(your_html_code);

在similar question page内查看更多内容。

Answer 4

我想我明白你要做什么。如果您需要一个可以轻松解析HTMl的.NET库，请尝试Html Agility Pack

你可以像使用.NET中的XMLDocument api解析xml一样解析html。这是一个.NET DLL，所以你必须在服务器端粗略地执行此操作。如果您需要在没有回发的情况下操作DOM，您可以始终在Web服务器上创建服务并进行包含html的ajax调用。

这有意义吗？

Answer 5

innerHTML是要走的路。也许您可以尝试仅重置正在更改的<td>的内部HTML，看看是否能提供您想要的效果？

您还可以查看DOM中的table manipulation methods。

Answer 6

function parseHTML(html) {
    var el = document.createElement("div");
    el.innerHTML = html;

    return el.childNodes;
}

var nodes = parseHTML("<span>Text</span>");

Answer 7

真诚地感谢所有回复 - 其中一些非常详细。我已经设法使用table.insertRow（）和innerHTML的组合来解决问题。它似乎是解决问题的最快，最干净的解决方案。希望它和本页面上的其他回复可以帮助其他人！

我们不是更新整个表格html，而是向DOM添加一个新行并将html插入其中：

function $(id){ //just a shortcut function
    return document.getElementById(id);
}

var lastID = 10;  //id number of last table row

function addRow(){
    var newhtml = $('templateRow').innerHTML); //copy the template row
    var t = $('aTable').insertRow(2) //insert a row in the desired position
    t.id = 'row'+lastID; //update the new tr's id
    t.innerHTML = newhtml //replace the innerHTML of the new row
    lastID++; //increment the counter for next time
}

Answer 8

您是否看过J Query（如果您被允许使用它）？

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

8 个答案:

DEMO