将HTML字符串附加到DOM

Question

如何附加此HTML字符串

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

使用'test'DOM中的ID进行DIV ？

(顺便说一下div.innerHTML += str;是不可接受的.)

Answer 1

使用insertAdjacentHTML(如果可用),否则使用某种回退.所有当前浏览器都支持 insertAdjacentHTML .

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.

但是,尼尔的答案是一个更好的解决方案.

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

这是一些性能测试：

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

摘要

AppendChild（E）在chrome和safari上比其他解决方案快2倍以上，insertAdjacentHTML（F）在Firefox上最快。在innerHTML=（B）（不要混淆+=）是所有浏览器第二快速的解决方案，它比E和F你更得心应手可以在你的机器重播测试在这里

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>