generate - innerhtml javascript

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>

¿No deberían ser los dos iguales? Y si no, ¿cómo consigo que la segunda versión funcione?

Answer 1

Con su motor JS / DOM, llamar a Element.appendChild con una string como argumento hace que se cree un nuevo nodo de Text y luego se agregue.

Tu 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 lo mencionó Sarfraz Ahmed en su respuesta , puede hacer que el segundo ejemplo funcione cómo quiere que funcione al escribir:

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

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

Answer 2

El último es simplemente una cadena que contiene HTML, mientras que el primero es un objeto. Para el primero, necesita appendChild mientras que para el segundo, necesita agregar a innerHTML .

¿No deberían ser los dos iguales? y si no, ¿cómo consigo la segunda versión para trabajar?

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

Answer 3

La solución más simple y compatible con todos los 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 4

También puede usar estos para agregar / anteponer un elemento al DOM respectivamente:

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

y use la variable elem para apuntar al elemento (por ejemplo):

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

etc.

Answer 5

appendChild está esperando un elemento, de modo que cuando lo envía, no sabe qué hacer. Es posible que desee considerar el uso de una biblioteca javascript para facilitar algo de ese trabajo, como jQuery. Tu código sería:

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

Answer 6

appendChild realmente espera un HTMLDomNode de algún tipo, como un HTMLDivElement , y no una cadena. No sabe cómo tratar con una cuerda. Podrías hacerlo

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

Pero realmente prefiero la primera versión; y confiaría más en ello para que se comporte igual en todos los navegadores.