将HTML字符串附加到DOM

Question

如何附加此HTML字符串

var str = '<p>Just some <span>text</span> here</p>';

到DOM中的ID为'test'的DIV？

（顺便说一句div.innerHTML += str;是不可接受的。）

Answer 1

如果可用，请使用insertAdjacentHTML，否则请使用某种后备。 insertAdjacentHTML is supported in all current browsers。

div.insertAdjacentHTML( 'beforeend', str );

现场演示： http://jsfiddle.net/euQ5n/

Answer 2

这可以接受吗？

var child = document.createElement('div');
child.innerHTML = str;
child = child.firstChild;
document.getElementById('test').appendChild(child);

jsFiddle

但，Neil's answer是更好的解决方案。

Answer 3

我们的想法是在中间元素上使用innerHTML，然后通过appendChild将其所有子节点移动到您真正想要的位置。

var target = document.getElementById('test');
var str = '<p>Just some <span>text</span> here</p>';

var temp = document.createElement('div');
temp.innerHTML = str;
while (temp.firstChild) {
  target.appendChild(temp.firstChild);
}

这可以避免在div#test上删除任何事件处理程序，但仍然允许您附加一串HTML。

Answer 4

正确的方法是使用insertAdjacentHTML。在早于8的Firefox中，如果Range.createContextualFragment不包含str标记，则可以使用script。

如果您的str包含script标记，则需要在插入片段之前从script返回的片段中删除createContextualFragment个元素。否则，脚本将运行。 （insertAdjacentHTML标记不可执行的脚本。）

Answer 5

这是一些性能测试：

<div id="container"></div>

和4个解决方案：

1. document.getElementById('container').innerHTML += '<p>Just some <span>text</span> here</p>';
2. $('#container').append('<p>Just some <span>text</span> here</p>');
3. var div = document.createElement("div"); div.innerHTML = '<p>Just some <span>text</span> here</p>'; document.getElementById('container').appendChild(div)
4. document.getElementById('container').insertAdjacentHTML('beforeend', '<p>Just some <span>text</span> here</p>');

在Chrome 67.0.3396.99（64位），Safari 11.0.3（13604.5.6），Firefox 59.0.2（64位）上设置MacOs High Sierra 10.13.3（2018.07.02））：< / p>

我们可以看到insertAdjacentHTML是最快的（每秒Safari 110M次操作，Chrome 65M，Firefox 39M），因此普通javascript比jQuery快（在所有浏览器上）。对于所有浏览器，innerHTML + = ...比jQuery慢。

您可以在计算机上重播测试：https://jsperf.com/insert-html-ttest

Answer 6

为什么这是不可接受的？

document.getElementById('test').innerHTML += str

将是教科书的方式。

Answer 7

快速黑客：

---

<script>
document.children[0].innerHTML="<h1>QUICK_HACK</h1>";
</script>

---

用例：

1：另存为.html文件，然后在chrome或firefox或edge中运行。 （即无法正常工作）

2：用于http://js.do

实际操作： http://js.do/HeavyMetalCookies/quick_hack

按评论分类：

<script>

//: The message "QUICK_HACK" 
//: wrapped in a header #1 tag.
var text = "<h1>QUICK_HACK</h1>";

//: It's a quick hack, so I don't
//: care where it goes on the document,
//: just as long as I can see it.
//: Since I am doing this quick hack in
//: an empty file or scratchpad, 
//: it should be visible.
var child = document.children[0];

//: Set the html content of your child
//: to the message you want to see on screen.
child.innerHTML = text;

</script>

原因，我发布：

JS.do有两个必须具备的条件：

1. 没有自动填充
2. 垂直监视器友好

但不显示console.log消息。 来到这里寻找快速解决方案。 我只想看看结果 几行暂存器代码， 其他解决方案太麻烦了。

Answer 8

这可以解决

 document.getElementById("list-input-email").insertAdjacentHTML('beforeend', '<div class=""><input type="text" name="" value="" class="" /></div>');

Answer 9

InnerHTML清除现有节点的所有数据，例如事件

使用firstChild附加子项仅将第一个子项添加到innerHTML。例如，如果我们必须附加：

 <p>text1</p><p>text2</p>

仅显示text1

那呢：

通过添加子项将特殊标签添加到innerHTML，然后通过删除我们创建的标签来编辑externalHTML。不知道它有多聪明，但对我有用 否则您可以将outerHTML更改为innerHTML，因此不必使用函数replace

function append(element, str)
{

  var child = document.createElement('someshittyuniquetag');
		
  child.innerHTML = str;

  element.appendChild(child);

  child.outerHTML = child.outerHTML.replace(/<\/?someshittyuniquetag>/, '');

// or Even child.outerHTML = child.innerHTML


  
}

<div id="testit">
This text is inside the div
<button onclick="append(document.getElementById('testit'), '<button>dadasasdas</button>')">To div</button>
<button onclick="append(this, 'some text')">to this</button>
</div>

Answer 10

最短-18个字符（不要混淆+=（OP提及）和=更多详细信息here）

test.innerHTML=str

var str = '<p>Just some <span>text</span> here</p>';

test.innerHTML=str

<div id="test"></div>