javascript - w3schools - title html

Anexar cadena HTML al DOM

Question

Cómo agregar esta cadena HTML

var str = ''<p>Just some <span>text</span> here</p>'';

al DIV con la ''test'' ID que está en el DOM?

(Por div.innerHTML += str; no es aceptable).

Answer 1

¿Es esto aceptable?

var child = document.createElement(''div'');
child.innerHTML = str;
child = child.firstChild;
document.getElementById(''test'').appendChild(child);

jsFiddle .

Pero , la respuesta de Neil es una mejor solución.

Answer 2

¿Por qué eso no es aceptable?

document.getElementById(''test'').innerHTML += str

sería la manera de hacerlo de libros de texto.

Answer 3

Aquí hay una prueba de rendimiento:

<div id="container"></div>

Y 4 soluciones:

1. document.getElementById(''container'').innerHTML += ''<p>Just some <span>text</span> here</p>'';
2. $(''#container'').append(''<p>Just some <span>text</span> here</p>'');
3. var div = document.createElement("div"); div.innerHTML = ''<p>Just some <span>text</span> here</p>''; document.getElementById(''container'').appendChild(div)
4. document.getElementById(''container'').insertAdjacentHTML(''beforeend'', ''<p>Just some <span>text</span> here</p>'');

Configuración del entorno (2018.07.02) MacOs High Sierra 10.13.3 en Chrome 67.0.3396.99 (64 bits), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64 bits):

Como podemos ver, insertAdjacentHTML es el más rápido (operaciones de Safari 110M por segundo, Chrome 65M, Firefox 39M), por lo que el javascript simple es más rápido que jQuery (en todos los navegadores). El innerHTML + = ... es más lento que jQuery para todos los navegadores.

Puede volver a probar en su máquina aquí: https://jsperf.com/insert-html-ttest

Answer 4

Esto puede resolver

 document.getElementById("list-input-email").insertAdjacentHTML(''beforeend'', ''<div class=""><input type="text" name="" value="" class="" /></div>'');

Answer 5

La forma correcta es usar insertAdjacentHTML . En Firefox anterior a 8, puede recurrir a Range.createContextualFragment si su str no contiene etiquetas de script .

Si su str contiene etiquetas de script , debe eliminar los elementos de script del fragmento devuelto por createContextualFragment antes de insertar el fragmento. De lo contrario, los scripts se ejecutarán. ( insertAdjacentHTML marca scripts no insertAdjacentHTML )

Answer 6

La idea es usar innerHTML en un elemento intermedio y luego mover todos sus nodos secundarios a donde realmente los desee a través de appendChild .

var target = document.getElementById(''test'');
var str = ''<p>Just some <span>text</span> here</p>'';

var temp = document.createElement(''div'');
temp.innerHTML = str;
while (temp.firstChild) {
  target.appendChild(temp.firstChild);
}

Esto evita borrar cualquier controlador de eventos en la div#test pero aún le permite agregar una cadena de HTML.

Answer 7

Las posiciones Beforebegin y Afterend funcionan solo si el nodo está en un árbol y tiene un elemento principal. - https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Answer 8

Use insertAdjacentHTML si está disponible; de ​​lo contrario, utilice algún tipo de respaldo. insertAdjacentHTML será compatible con Firefox 8 y también es compatible con Safari 4, Chrome, IE y Opera, según https://developer.mozilla.org/en/DOM/element.insertAdjacentHTML

div.insertAdjacentHTML( ''beforeend'', str );

Demostración en vivo: http://jsfiddle.net/euQ5n/