javascript - 将任意 HTML 字符串注入(inject)文档 (javascript) - 已更新

Question

更新:我只是将我的问题缩小到:

为什么这行不通:

var tmp = document.createElement('tbody');
tmp.innerHTML="<tr><td>hello</td></tr>";

tmp 正在获取字符串 hello。 tr 和 td html 丢失(在 FireFox 上)。这是为什么？我怎样才能让这样的 html 注入(inject)工作？

原始问题:

我需要在任意 HTML 文档中的任意元素之后注入(inject)任意 HTML。我遇到了这个方法(将 html 字符串注入(inject)动态生成的 div，获取其第一个子元素并将其插入正确的位置):

var tmp = document.createElement('div'); 
tmp.innerHTML = _injected_html;
var new_w = tmp.firstChild;
var parent = insertion_point.parentNode;
parent.insertBefore(new_w, insertion_point.nextSibling);

问题是这在尝试注入(inject)表格元素时不起作用。例如，如果 注入(inject) html 是

"<tr> <td> table data </td> </tr>"

_tmp.innerHTML = _injected_html; 不会接受它(在 div 元素下添加 tr)。

知道如何使它适用于任何标签吗？

Answer 1

您是否有机会在 IE 中进行测试？它很可能在其他浏览器中工作。

Here's why

编辑: 等等，您正在向表中插入类似于 <div><tr><td> 的内容...那是行不通的。为什么不更换 document.createElement('div')通过 document.createElement('tr') , 并删除 <tr>来自 _injected_html 的标签？

像这样(在 Firefox 中测试):

<script>
var i = 3;

function f() {
    var table = document.getElementById('someTable');
    var children = table.children[0].children;
    var after = children[Math.round(Math.random() * (children.length - 1))];
    var html = "<td>" + i++ + "</td>";

    g(html, after);
}

function g(_injected_html, insertion_point) {
    var tmp = document.createElement('tr'); 
    tmp.innerHTML = _injected_html;
    var new_w = tmp.firstChild;
    var parent = insertion_point.parentNode;
    parent.insertBefore(new_w, insertion_point.nextSibling);
}
</script>

<table id="someTable" onclick="f();">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
</table>

f() 的第二行有点笨拙，但它获取了表的第一个子项(即 <tbody> )，然后是它的子项(实际的 <tr> s)。