javascript - Thêm chuỗi HTML vào DOM

Cách thêm một chuỗi HTML như

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

tới <div> với id test?

(Nhân tiện div.innerHTML += str; là không chấp nhận được.)

Câu trả lời #1

Sử dụng insertAdjacentHTML được hỗ trợ trên tất cả các trình duyệt hiện nay:

div.insertAdjacentHTML( 'beforeend', str );

Tham số vị trí beforeend sẽ thêm vào bên trong phần tử, sau phần tử con cuối cùng của nó.

Trình diễn trực tiếp: http://jsfiddle.net/euQ5n/

Câu trả lời #2

Hiệu suất

AppendChild (E) nhanh hơn gấp hơn 2 lần so với các giải pháp khác trên Chrome và Safari, insertAdjacentHTML(F) là nhanh nhất trên Firefox. innerHTML= (B) (đừng nhầm với += (A)) là giải pháp nhanh thứ hai trên tất cả các trình duyệt và nó tiện lợi hơn nhiều so với E và F.

Chi tiết

Thiết lập môi trường (10.07.2019) MacOs High Sierra 10.13.4 trên Chrome 75.0.3770 (64-bit), Safari 11.1.0 (13604.5.6), Firefox 67.0.0 (64-bit)

• Trên Chrome E (140 nghìn thao tác mỗi giây) là nhanh nhất, B (47 nghìn) và F (46 nghìn) đứng thứ hai, A (332) là chậm nhất
• trên firefox F (94k) là nhanh nhất, sau đó B(80k), D (73k), E(64k), C (21k) chậm nhất là A(466)
• Trên Safari, E(207k) là nhanh nhất, sau đó là B(89k), F(88k), D(83k), C(25k), chậm nhất là A(509)

Bạn có thể phát lại bài kiểm tra trên máy của bạn ở đây

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>

Câu trả lời #3

Điều này có chấp nhận được không?

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

jsFiddle.

Nhưng, câu trả lời của Neil là một giải pháp tốt hơn.

Câu trả lời #4

Ý tưởng là sử dụng innerHTML trên một phần tử trung gian và sau đó chuyển tất cả các nút con của nó đến nơi bạn thực sự muốn chúng thông qua 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);
}

Điều này tránh xóa sạch bất kỳ trình xử lý sự kiện nào trên div#test nhưng vẫn cho phép bạn thêm một chuỗi HTML.