Nối chuỗi HTML vào DOM

Cách nối chuỗi HTML này

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

đến DIV với ID 'test'có trong DOM?

(Btw div.innerHTML += str;không được chấp nhận.)

Sử dụng insertAdjacentHTMLnếu nó có sẵn, nếu không sử dụng một số loại dự phòng. insertAdjighborHTML được hỗ trợ trong tất cả các trình duyệt hiện tại .

div.insertAdjacentHTML( 'beforeend', str );

Bản demo trực tiếp: http://jsfiddle.net/euQ5n/

đ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.

Hiệu suất

AppendChild(E) nhanh hơn gấp 2 lần so với các giải pháp khác trên chrome và safari, insertAdjacentHTML(F) nhanh nhất trên firefox. Các innerHTML=(B) (Đừng nhầm lẫn với +=(A)) là giải pháp nhanh thứ hai trên tất cả các trình duyệt và nó là nhiều hơn nữa tiện dụng hơn so với E và F.

Chi tiết

Thiết lập môi trường (2019.07.10) 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 (hoạt động 140k mỗi giây) là nhanh nhất, B (47k) và F (46k) là 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 đó 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 trong 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>

Ý tưởng là sử dụng innerHTMLtrên một phần tử trung gian và sau đó di 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 đi 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 mọi trình xử lý sự kiện trên div#testnhưng vẫn cho phép bạn nối thêm một chuỗi HTML.

Cách đúng là sử dụng insertAdjacentHTML. Trong Firefox sớm hơn 8, bạn có thể quay lại sử dụng Range.createContextualFragmentnếu strkhông chứa scriptthẻ.

Nếu thẻ strchứa của bạn script, bạn cần xóa scriptcác phần tử khỏi đoạn được trả về createContextualFragmenttrước khi chèn đoạn. Nếu không, các kịch bản sẽ chạy. ( insertAdjacentHTMLđánh dấu các tập lệnh không thể thực hiện được.)

Hack nhanh :

<script>
document.children[0].innerHTML="<h1>QUICK_HACK</h1>";
</script>

Các trường hợp sử dụng :

1: Lưu dưới dạng tệp .html và chạy trong chrome hoặc firefox hoặc edge. (IE không hoạt động)

2: Sử dụng trong http://js.do

Đang hoạt động: http://js.do/HeavyMetalCookies/quick_hack

Chia nhỏ với ý kiến:

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

Lý do tại sao tôi đăng:

JS.do có hai phải có:

1. Không tự động hoàn thành
2. Màn hình dọc thân thiện

Nhưng không hiển thị tin nhắn console.log. Đến đây để tìm kiếm một giải pháp nhanh chóng. Tôi chỉ muốn xem kết quả của một vài dòng mã Scratchpad, các giải pháp khác là quá nhiều công việc.

Tại sao điều đó không được chấp nhận?

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

sẽ là cách làm sách giáo khoa.

Điều này có thể giải quyết

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

InternalHTML xóa tất cả dữ liệu như sự kiện cho các nút hiện có

chắp thêm con với FirstChild chỉ thêm con đầu tiên vào bên trongHTML. Ví dụ: nếu chúng ta phải nối thêm:

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

chỉ text1 sẽ hiển thị

Cái này thì sao:

thêm thẻ đặc biệt vào InternalHTML bằng cách nối thêm con và sau đó chỉnh sửa bên ngoàiHTML bằng cách xóa thẻ chúng tôi đã tạo. Không biết nó thông minh như thế nào nhưng nó hoạt động với tôi hoặc bạn có thể thay đổi bên ngoàiHTML sang bên trongHTML để không phải sử dụng chức năng thay thế

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>

Ngắn nhất - 18 ký tự (không nhầm lẫn +=(được đề cập bởi OP) với =nhiều chi tiết hơn ở đây )

test.innerHTML=str

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

test.innerHTML=str

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