appendChild + createElement

Question

¿Cuál es la diferencia entre

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

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

y

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

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

debe ser ambos del mismo? y si no, ¿cómo consigo que funcione la segunda versión?

Answer 1

Lo último es html puro para un elemento, mientras que el primero es el objeto. Para el primero, necesita appendChild, mientras que para el posterior, necesita innerHTML.

no deberían ser iguales? y si no es , ¿cómo obtengo la 2da versión para ?

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

Answer 2

appendChild está a la espera de un elemento de modo que cuando se envía el texto, que no sabe qué hacer. Es posible que desee considerar el uso de una biblioteca de JavaScript para facilitar parte de ese trabajo, como jQuery. El código sería:

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

Answer 3

appendChild realmente hace esperar una HTMLDomNode de algún tipo, como por ejemplo un HTMLDivElement, y no una cadena. No sabe cómo lidiar con una cadena. Usted puede hacer

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

pero realmente prefiero la primera versión; y confío más en que se comporte igual en todos los navegadores.

Answer 4

Con su motor JS/DOM, llamando al Element.appendChild con un string como argumento, se crea un nuevo nodo Text y luego se agrega.

Su primer ejemplo crea un elemento <div>. Su segundo ejemplo crea un nodo de texto con <div></div> como su contenido.

Su segundo ejemplo es equivalente a:

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

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

Como Sarfraz Ahmed mentioned in his answer, puede hacer que el segundo trabajo de ejemplo cómo desea que funcione por escrito:

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

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

Answer 5

La solución más simple y apoyar todas las navegadores es:

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

Otra solución puede ser:

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

También puede utilizar estos para anexar/prepend un elemento a la DOM respectivamente:

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

y utilizar la variable elem para orientar el elemento (por ejemplo):

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

etc.