Javascript - Tambahkan HTML ke elemen penampung tanpa innerHTML

Saya perlu cara untuk menambahkan HTML ke elemen wadah tanpa menggunakan innerHTML. Alasan mengapa saya tidak ingin menggunakan innerHTML adalah karena ketika digunakan seperti ini:

element.innerHTML += htmldata

Ini bekerja dengan mengganti semua html terlebih dahulu sebelum menambahkan html lama ditambah html baru. Ini tidak baik karena mengatur ulang media dinamis seperti video flash yang tertanam ...

Saya bisa melakukannya dengan cara ini:

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

Namun masalah dengan cara itu adalah bahwa ada tag rentang ekstra dalam dokumen sekarang yang tidak saya inginkan.

Bagaimana ini bisa dilakukan? Terima kasih!

Untuk memberikan alternatif (seperti menggunakan DocumentFragmenttampaknya tidak berhasil): Anda dapat mensimulasikannya dengan mengulangi anak-anak dari simpul yang baru dibuat dan hanya menambahkannya.

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

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

Saya terkejut bahwa tidak ada jawaban yang menyebutkan insertAdjacentHTML()metode ini. Lihat di sini . Parameter pertama adalah di mana Anda ingin string ditambahkan dan mengambil ("beforebegin", "afterbegin", "beforeend", "afterend"). Dalam situasi OP Anda akan menggunakan "beforeend". Parameter kedua hanyalah string html.

Penggunaan dasar:

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

alnafie memiliki jawaban yang bagus untuk pertanyaan ini. Saya ingin memberikan contoh kode untuk referensi:

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>

Semoga ini bermanfaat bagi orang lain.

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

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

tetapkan data untuk div dengan simbol "+ =" Anda dapat menambahkan data termasuk data html sebelumnya

Inilah yang DocumentFragmentdimaksudkan untuk.

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

Cara memancing dan sambil menggunakan kode ketat. Ada dua fungsi prasyarat yang diperlukan di bagian bawah posting ini.

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

Tambahkan beberapa elemen (namespace hanya perlu di elemen induk):

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

Kode reusable dinamis:

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