Javascript - Hängt HTML ohne innerHTML an 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, liegt darin, dass es wie folgt 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. Dies ist nicht gut, da dynamische Medien wie eingebettete Flash-Videos zurückgesetzt werden ...

Ich könnte es so machen, was funktioniert:

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

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

Wie kann das dann gemacht werden? Vielen Dank!

So geben Sie eine Alternative an (da die Verwendung DocumentFragmentnicht zu funktionieren scheint): Sie können sie simulieren, indem Sie die untergeordneten Elemente des neu generierten Knotens durchlaufen und nur diese anhängen.

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

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

Ich bin überrascht, dass in keiner der Antworten die insertAdjacentHTML()Methode erwähnt wurde. Schau es dir hier an . Der erste Parameter ist, wo Sie die Zeichenfolge anhängen und nehmen möchten ("beforebegin", "afterbegin", "beforeend", "afterend"). In der Situation des OP würden Sie "beforeend" verwenden. Der zweite Parameter ist nur die HTML-Zeichenfolge.

Grundlegende Verwendung:

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

alnafie hat eine gute Antwort auf diese Frage. Ich wollte ein Beispiel seines Codes 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 für andere hilfreich.

<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 vorheriger HTML-Daten anhängen

Dafür DocumentFragmentwar 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

Wie man fischt und dabei strengen Code verwendet. Am Ende dieses Beitrags sind zwei vorausgesetzte 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 (der Namespace muss sich nur im übergeordneten Element befinden):

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

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