Javascript function 将 HTML 字符串解析成 DOM？

Question

有没有好的 JS function 或 class 可以在不重置现有内容的情况下将 HTML 的字符串无缝解析到 DOM 中？ 我试图找到一种简单的方法来复制表格顶部的复杂表格行。

它显然会像这样工作：

element.innerHTML = newHTML + element.innerHTML;

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

更新：

我没有在这个项目中使用 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 并将该片段插入到 go 中的目标节点中。

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

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

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

这样做的好处是，如果您有很多新行，您可以将表格放在一个<tbody>中，然后insertBefore / appendChild该主体将所有行放在一个 go 中，这比一个更快-一。

Answer 2

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

    return el.childNodes;
}

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

Answer 3

^{免责声明：这些天我不再使用 jQuery 编写代码。 很简单，因为我讨厌在这个浏览器上使用属性 A 和在这个浏览器上使用属性 B 之间的浏览器怪癖。 也就是说，这在 Firefox 中有效，但更多的是关于降低概念。 我只是想尽可能提前。}

演示

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

1. 让你的<table>包含所有你不想大惊小怪的“原始”/“未污染”数据。 ^[表格1]
2. 将一个包含您需要的附加数据的字符串插入到这个原始表中，而无需操纵（或以其他方式阻碍）table1 已经发生的任何事情。 ^{[样本数据]}
3. 创建一个新的<table> ^[table2]并将其添加到文档中（但将其设置为完全不可见）。 根据字符串的内容，您可以使用<div> ，但无论您使用哪种方法 go 它都应该是不可见的（毕竟，我们使用它的目的是能够使用innerHTML解析 html 字符串）。
4. 现在获取新<table> ^[table2] （或<div> ）的内容并使用 javascript 和 DOM 将这些项目推送到新表中。

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

Answer 4

使用例如 jQuery （具体方法的文档 - 带有示例 - 在这里）：

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

然后像这样使用它：

jQuery(your_html_code);

在 类似的问题页面中查看更多信息。

Answer 5

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

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

那有意义吗？

Answer 6

innerHTML是通往 go 的方式。 也许您可以尝试仅重置您正在更改的<td>的内部 HTML ，看看这是否会产生您想要的效果？

您还可以查看 DOM 中的表操作方法。

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 （如果您被允许使用它）？