Question

更新：我只是将我的问题缩小到这个：

为什么这不起作用：

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

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

原始问题：

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

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

问题是在尝试注入表元素时这不起作用。如果注入 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>）。< / p>

Answer 2

<div><td><lol/>

..是无效的HTML！表行/列/头，列表项，定义列表等需要容器。在注入之前，你能以某种方式验证HTML的适当容器吗？

Answer 3

对于表格，您必须将tr插入tbody。当你写html

<table><tr><td>abc</td></tr></table>

IE，FF，Chrome，Safari至少（不知道其他人直接）将修改为：

<table><tbody><tr><td>abc</td></tr></tbody></table>

因此，如：

var tmp = document.createElement('tr'); 
tmp.innerHTML = "<td>def</td>";
var new_w = tmp.firstChild;
var parent = insertion_point.parentNode;
parent.insertBefore(new_w, insertion_point.nextSibling);

如果 inserted_point是tr标记。

但老实说，对于Jquery来说，有更多优雅的方式来解决这个问题，就像christina toma所说的那样。

Answer 4

以下javascript将允许您将HTML / etc注入本地页面：

var example = "<p>test</p>"
document.body.appendChild(example);

也就是说，必须根据您插入的来自定义代码。

将任意HTML字符串注入文档（javascript） - 已更新

4 个答案: