Javascript - Nối HTML vào phần tử container mà không có InternalHTML

Tôi cần một cách để nối HTML vào thành phần chứa mà không cần sử dụng InternalHTML. Lý do tại sao tôi không muốn sử dụng InternalHTML là vì khi nó được sử dụng như thế này:

element.innerHTML += htmldata

Nó hoạt động bằng cách thay thế tất cả các html trước khi thêm html cũ cộng với html mới. Điều này không tốt vì nó đặt lại phương tiện động như video flash nhúng ...

Tôi có thể làm theo cách này hoạt động:

var e = document.createElement('span');
e.innerHTML = htmldata;
element.appendChild(e);

Tuy nhiên, vấn đề với cách đó là có thêm thẻ span trong tài liệu mà tôi không muốn.

Làm thế nào điều này có thể được thực hiện sau đó? Cảm ơn!

Để đưa ra một giải pháp thay thế (vì việc sử dụng DocumentFragmentdường như không hoạt động): Bạn có thể mô phỏng nó bằng cách lặp lại các phần tử con của nút mới được tạo và chỉ nối thêm chúng.

var e = document.createElement('div');
e.innerHTML = htmldata;

while(e.firstChild) {
    element.appendChild(e.firstChild);
}

Tôi ngạc nhiên khi không có câu trả lời nào đề cập đến insertAdjacentHTML() phương pháp này. Kiểm tra nó ở đây . Tham số đầu tiên là nơi bạn muốn chuỗi được nối và lấy ("beforebegin", "afterbegin", "beforeend", "afterend"). Trong tình huống của OP, bạn sẽ sử dụng "trước". Tham số thứ hai chỉ là chuỗi html.

Cách sử dụng cơ bản:

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');

alnafie có một câu trả lời tuyệt vời cho câu hỏi này. Tôi muốn đưa ra một ví dụ về mã của anh ấy để tham khảo:

var childNumber = 3;

function addChild() {
  var parent = document.getElementById('i-want-more-children');
  var newChild = '<p>Child ' + childNumber + '</p>';
  parent.insertAdjacentHTML('beforeend', newChild);
  childNumber++;
}

body {
  text-align: center;
}
button {
  background: rgba(7, 99, 53, .1);
  border: 3px solid rgba(7, 99, 53, 1);
  border-radius: 5px;
  color: rgba(7, 99, 53, 1);
  cursor: pointer;
  line-height: 40px;
  font-size: 30px;
  outline: none;
  padding: 0 20px;
  transition: all .3s;
}
button:hover {
  background: rgba(7, 99, 53, 1);
  color: rgba(255,255,255,1);
}
p {
  font-size: 20px;
  font-weight: bold;
}

<button type="button" onclick="addChild()">Append Child</button>
<div id="i-want-more-children">
  <p>Child 1</p>
  <p>Child 2</p>
</div>

Hy vọng điều này hữu ích cho người khác.

<div id="Result">
</div>

<script>
for(var i=0; i<=10; i++){
var data = "<b>vijay</b>";
 document.getElementById('Result').innerHTML += data;
}
</script>

gán dữ liệu cho div bằng ký hiệu "+ =" bạn có thể nối thêm dữ liệu bao gồm dữ liệu html trước đó

Đây là những gì DocumentFragmentcó nghĩa là cho.

var frag = document.createDocumentFragment();
var span = document.createElement("span");
span.innerHTML = htmldata;
for (var i = 0, ii = span.childNodes.length; i < ii; i++) {
    frag.appendChild(span.childNodes[i]);
}
element.appendChild(frag);

document.createDocumentFragment, .childNodes

Làm thế nào để câu cá và trong khi sử dụng mã nghiêm ngặt. Có hai chức năng tiên quyết cần thiết ở cuối bài này.

xml_add('before', id_('element_after'), '<span xmlns="http://www.w3.org/1999/xhtml">Some text.</span>');

xml_add('after', id_('element_before'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

xml_add('inside', id_('element_parent'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

Thêm nhiều phần tử (không gian tên chỉ cần có trên phần tử cha):

xml_add('inside', id_('element_parent'), '<div xmlns="http://www.w3.org/1999/xhtml"><input type="text" /><input type="button" /></div>');

Mã tái sử dụng động:

function id_(id) {return (document.getElementById(id)) ? document.getElementById(id) : false;}

function xml_add(pos, e, xml)
{
 e = (typeof e == 'string' && id_(e)) ? id_(e) : e;

 if (e.nodeName)
 {
  if (pos=='after') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e.nextSibling);}
  else if (pos=='before') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  else if (pos=='inside') {e.appendChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true));}
  else if (pos=='replace') {e.parentNode.replaceChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  //Add fragment and have it returned.
 }
}