Hängt HTML ohne innerHTML an das Containerelement an

Ich brauche eine Möglichkeit, HTML an ein Containerelement anzuhängen, ohne innerHTML zu verwenden. Der Grund, warum ich innerHTML nicht verwenden möchte, ist, dass, wenn es so verwendet wird:

element.innerHTML += htmldata

Es funktioniert, indem zuerst der gesamte HTML-Code ersetzt wird, bevor der alte HTML-Code und der neue HTML-Code hinzugefügt werden. Das ist nicht gut, weil es dynamische Medien wie eingebettete Flash-Videos zurücksetzt …

Ich könnte es so machen, was funktioniert:

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

Das Problem dabei ist jedoch, dass das Dokument jetzt dieses zusätzliche Span-Tag enthält, das ich nicht möchte.

Wie kann dies dann geschehen? Vielen Dank!

Kasse das insertAdjacentHTML() Methode. Der erste Parameter ist, wo die Zeichenfolge angehängt werden soll und dauert (“beforebegin”, “afterbegin”, “beforeend”, “afterend”). In der Situation des OP würden Sie “beforeend” verwenden. Der zweite Parameter ist nur der HTML-String.

Grundlegende Verwendung:

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

Um eine Alternative zu geben (als using DocumentFragment scheint nicht zu funktionieren): Sie können es simulieren, indem Sie über die Kinder des neu generierten Knotens iterieren und nur diese anhängen.

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

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

alnafie hat eine großartige Antwort auf diese Frage. Ich wollte ein Beispiel für seinen Code als Referenz geben:

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>

Hoffentlich ist dies hilfreich für andere.

Das ist was DocumentFragment war dafür gedacht.

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

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

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

Weisen Sie die Daten für div mit dem Symbol “+=” zu. Sie können Daten einschließlich früherer HTML-Daten anhängen

Wie man fischt und bei der Verwendung von striktem Code. Am Ende dieses Beitrags sind zwei erforderliche Funktionen erforderlich.

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

Fügen Sie mehrere Elemente hinzu (Namespace muss sich nur auf dem übergeordneten Element befinden):

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

Dynamischer wiederverwendbarer Code:

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