appendChild + create

Question

Was ist der Unterschied zwischen

var div = document.createElement('div');//output -> [object HTMLDivElement] 

document.getElementById('container').appendChild(div); 

und

var div = '<div></div>'; 

document.getElementById('container').appendChild(div);//output -> <div></div> 

sollten beide nicht die gleiche sein? und wenn nicht, wie bekomme ich die 2. Version zur Arbeit?

Answer 1

Das spätere ist reines HTML für ein Element, während zuerst das Objekt ist. Für den ersten brauchen Sie appendChild während für den späteren, benötigen Sie innerHTML.

sollten nicht beide gleich sein? und wenn nicht, wie bekomme ich die 2. Version zu arbeiten?

var div = '<div></div>'; 
document.getElementById('container').innerHTML = div; 

Answer 2

appendChild erwartet, also ein Element, wenn Sie es Text senden, ist es nicht weiß, was zu tun ist. Vielleicht möchten Sie mit einer Javascript-Bibliothek arbeiten, um einige dieser Arbeiten zu erleichtern, wie z. B. jQuery. Ihr Code wäre:

$('#container').append('<div></div>'); 

Answer 3

appendChild wirklich tut, erwarten eine HTMLDomNode irgendeiner Art, wie ein HTMLDivElement und kein String. Es kann nicht mit einer Zeichenfolge umgehen. Sie könnten tun

document.getElementById('container').innerHTML += div; 

aber ich bevorzuge wirklich die erste Version; und ich würde mich mehr darauf verlassen, dass es sich in allen Browsern gleich verhält.

Answer 4

Wenn Sie mit Ihrer JS/DOM-Engine Element.appendChild mit einem string als Argument aufrufen, wird ein neuer Knoten Text erstellt und dann hinzugefügt.

Ihr erstes Beispiel erstellt ein <div> Element. Ihr zweites Beispiel erstellt einen Textknoten mit <div></div> als Inhalt.

Ihr zweites Beispiel ist äquivalent zu:

var div = '<div></div>'; 

document.getElementById('container').appendChild(document.createTextNode(div));//output -> <div></div> 

Als Sarfraz Ahmed mentioned in his answer, können Sie das zweite Beispiel funktioniert, wie Sie es durch Schreiben arbeiten wollen:

var div = '<div></div>'; 

document.getElementById('container').innerHTML = div; 

Answer 5

Die einfachste Lösung und unterstützen alle Browser ist:

var div = '<div></div>'; 
var parser = new DOMParser(); 
var myDiv = parser.parseFromString(html, "text/xml"); 

Eine andere Lösung kann sein:

var div = '<div></div>'; 
var tmpDiv = document.createElement('div'); 
    tmpDiv.innerHTML = div; 

    elDiv = tmpDiv.childNodes[0]; //Now it can be used as an element 

Answer 6

Sie auch die/jeweils prepend ein Element zu dem DOM anhängen können:

var elem = document.documentElement.appendChild(document.createElement(element)); 
var elem = document.documentElement.prepend(document.createElement(element)); 

verwenden elem variable das Element (Eg) zum Ziel:

elem.style.display = "block"; 
elem.style.remove(); 
elem.style.id = ...; 

etc.