Javascript - ต่อท้าย HTML เข้ากับองค์ประกอบคอนเทนเนอร์โดยไม่ต้อง InnerHTML

ฉันต้องการวิธีผนวก HTML เข้ากับองค์ประกอบคอนเทนเนอร์โดยไม่ต้องใช้ innerHTML เหตุผลที่ฉันไม่ต้องการใช้ innerHTML ก็เพราะเมื่อมันใช้งานแบบนี้:

element.innerHTML += htmldata

ใช้งานได้โดยแทนที่ html ทั้งหมดก่อนที่จะเพิ่ม html เก่าบวก html ใหม่ สิ่งนี้ไม่ดีเนื่องจากรีเซ็ตสื่อแบบไดนามิกเช่นวิดีโอแฟลชในตัว ...

ฉันสามารถทำได้ด้วยวิธีนี้ซึ่งได้ผล:

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

อย่างไรก็ตามปัญหาของวิธีนี้คือมีแท็ก span พิเศษในเอกสารที่ฉันไม่ต้องการ

วิธีนี้สามารถทำได้? ขอบคุณ!

หากต้องการให้ทางเลือกอื่น ( DocumentFragmentดูเหมือนว่าการใช้ไม่ได้ผล): คุณสามารถจำลองมันได้โดยทำซ้ำกับโหนดย่อยของโหนดที่สร้างขึ้นใหม่และต่อท้ายโหนดเหล่านั้นเท่านั้น

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

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

ฉันประหลาดใจที่ไม่มีคำตอบที่กล่าวถึงinsertAdjacentHTML()วิธีการ ตรวจสอบออกที่นี่ พารามิเตอร์แรกคือตำแหน่งที่คุณต้องการให้สตริงต่อท้ายและรับ ("beforebegin", "afterbegin", "beforeend", "afterend") ในสถานการณ์ของ OP คุณจะต้องใช้ "ก่อนหน้า" พารามิเตอร์ที่สองเป็นเพียงสตริง html

การใช้งานขั้นพื้นฐาน:

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

alnafie มีคำตอบที่ดีสำหรับคำถามนี้ ฉันต้องการให้ตัวอย่างของรหัสของเขาสำหรับการอ้างอิง:

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>

หวังว่านี่จะเป็นประโยชน์กับคนอื่น ๆ

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

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

กำหนดข้อมูลสำหรับ div ด้วยสัญลักษณ์ "+ =" คุณสามารถต่อท้ายข้อมูลรวมถึงข้อมูล html ก่อนหน้า

นี่คือสิ่งที่DocumentFragmentมีไว้สำหรับ

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

วิธีการตกปลาและในขณะที่ใช้รหัสที่เข้มงวด มีฟังก์ชันที่จำเป็นต้องมีสองอย่างที่ด้านล่างของโพสต์นี้

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" />');

เพิ่มองค์ประกอบหลายรายการ (เนมสเปซจะต้องอยู่ในองค์ประกอบหลักเท่านั้น):

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

รหัสนำมาใช้ใหม่แบบไดนามิก:

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