使用insertAdjacentHTML这在目前所有的浏览器都支持：

div.insertAdjacentHTML( 'beforeend', str );

position 参数beforeend将添加到元素内部，在其最后一个子元素之后。

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

表现

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

细节

设置环境 (2019.07.10) MacOs High Sierra 10.13.4 on Chrome 75.0.3770 (64-bit), Safari 11.1.0 (13604.5.6), Firefox 67.0.0 (64-bit)

• 在 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>

这是可以接受的吗？

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

js小提琴。

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

这个想法是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标签，您可以回退使用。

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