Javascript - dołącz kod HTML do elementu kontenera bez innerHTML

Potrzebuję sposobu, aby dołączyć kod HTML do elementu kontenera bez użycia innerHTML. Powodem, dla którego nie chcę używać innerHTML, jest to, że kiedy jest używany w ten sposób:

element.innerHTML += htmldata

Działa poprzez zastąpienie całego kodu HTML przed dodaniem starego i nowego HTML. To nie jest dobre, ponieważ resetuje dynamiczne multimedia, takie jak osadzone filmy flash ...

Mógłbym to zrobić w ten sposób, który działa:

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

Jednak problem z tym sposobem polega na tym, że w dokumencie jest teraz dodatkowy tag span, którego nie chcę.

Jak więc można to zrobić? Dzięki!

Aby dać alternatywę (ponieważ używanie DocumentFragmentwydaje się nie działać): Możesz to zasymulować, iterując po elementach potomnych nowo wygenerowanego węzła i tylko je dołączać.

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

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

Dziwię się, że żadna z odpowiedzi nie wspomina o insertAdjacentHTML()metodzie. Sprawdź to tutaj . Pierwszym parametrem jest miejsce, w którym chcesz dołączyć ciąg i trwa („przed rozpoczęciem”, „po rozpoczęciu”, „przed końcem”, „po”). W sytuacji OP użyłbyś „przed końcem”. Drugi parametr to po prostu ciąg html.

Podstawowe użycie:

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

alnafie ma świetną odpowiedź na to pytanie. Chciałem podać przykład jego kodu w celach informacyjnych:

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>

Mam nadzieję, że jest to pomocne dla innych.

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

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

przypisz dane do div za pomocą symbolu „+ =”, możesz dołączyć dane, w tym poprzednie dane HTML

Do tego DocumentFragmentbyło przeznaczone.

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

Jak łowić i używać ścisłego kodu. Na dole tego wpisu potrzebne są dwie funkcje wstępne.

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

Dodaj wiele elementów (przestrzeń nazw musi znajdować się tylko w elemencie nadrzędnym):

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

Dynamiczny kod wielokrotnego użytku:

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