将 HTML 字符串追加到 DOM

javascript dom html browser

2022-08-30 02:01:04

如何追加 HTML 字符串，例如

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

到与 ID ？<div>test

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

答案 1

使用所有当前浏览器都支持的 insertAdjacentHTML：

div.insertAdjacentHTML( 'beforeend', str );

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

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

答案 2

性能

AppendChild（E）在chrome和safari上比其他解决方案快2倍以上，（F）在firefox上速度最快。（B）（不要与（A）混淆）是所有浏览器上的第二快速解决方案，它比E和F方便得多。insertAdjacentHTMLinnerHTML=+=

详

在 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）是最慢的
在火狐上 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>