将HTML字符串追加到DOM

如何附加这个HTML字符串

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

到具有'test'DOM中ID的DIV ？

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

使用（insertAdjacentHTML如果可用），否则使用某种后备。当前所有浏览器均支持 insertAdjacentHTML 。

div.insertAdjacentHTML( 'beforeend', str );

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

这可以接受吗？

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

jsFiddle。

但是，尼尔的答案是一个更好的解决方案。

性能

AppendChild（E）在chrome和safari上比其他解决方案快两倍以上，insertAdjacentHTML（F）在Firefox上最快。在innerHTML=（B）（不要混淆+=（A））是在所有的浏览器第二快速的解决方案，这是更方便的比E和F.

细节

在Chrome 75.0.3770（64位），Safari 11.1.0（13604.5.6），Firefox 67.0.0（64位）上设置环境（2019.07.10）MacOs High Sierra 10.13.4

• Chrome E（每秒140k次操作）最快，B（47k）和F（46k）次之，A（332）最快
• 在Firefox上F（94k）最快，然后B（80k），D（73k），E（64k），C（21k）最慢是A（466）
• 在Safari E（207k）上最快，然后是B（89k），F（88k），D（83k），C（25k），最慢的是A（509）

您可以在此处重播测试

function A() {    
  container.innerHTML += '<p>A: Just some <span>text</span> here</p>';
}

function B() {    
  container.innerHTML = '<p>B: Just some <span>text</span> here</p>';
}

function C() {    
  $('#container').append('<p>C: Just some <span>text</span> here</p>');
}

function D() {
  var p = document.createElement("p");
  p.innerHTML = 'D: Just some <span>text</span> here';
  container.appendChild(p);
}

function E() {    
  var p = document.createElement("p");
  var s = document.createElement("span"); 
  s.appendChild( document.createTextNode("text ") );
  p.appendChild( document.createTextNode("E: Just some ") );
  p.appendChild( s );
  p.appendChild( document.createTextNode(" here") );
  container.appendChild(p);
}

function F() {    
  container.insertAdjacentHTML('beforeend', '<p>F: Just some <span>text</span> here</p>');
}

A();
B();
C();
D();
E();
F();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This snippet only for show code used in test (in jsperf.com) - it not perform test itself. 
<div id="container"></div>

这个想法是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字符串。

正确的方法是使用insertAdjacentHTML。在Firefox 8之前的版本中，Range.createContextualFragment如果您不str包含任何script标记，则可以退回使用。

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

快速黑客：

<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消息。来到这里寻找快速解决方案。我只想看几行暂存器代码的结果，其他解决方案却工作太多。

为什么不能接受？

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

将是教科书上的做法。

这样可以解决

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

InnerHTML清除现有节点的所有数据（如事件）

将带有firstChild的child追加到innerHTML中仅添加第一个孩子。例如，如果我们必须追加：

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

仅显示text1

那这个呢：

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

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>

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

test.innerHTML=str

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

test.innerHTML=str

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