Inserción de elementos HTML con JavaScript

Question

En lugar de tediosamente buscar soluciones para cada tipo de atributo y el evento cuando se utiliza la siguiente sintaxis:

elem = document.createElement("div"); 
    elem.id = 'myID'; 
    elem.innerHTML = ' my Text ' 
    document.body.insertBefore(elem,document.body.childNodes[0]); 

¿Hay alguna manera en que sólo se puede declarar la totalidad del elemento HTML como una cadena ? como:

elem = document.createElement("<div id='myID'> my Text </div>"); 
    document.body.insertBefore(elem,document.body.childNodes[0]); 

Answer 1

en lugar de jugar directamente con innerHTML que podría ser mejor para crear un fragmento y luego se inserta lo siguiente:

function create(htmlStr) { 
    var frag = document.createDocumentFragment(), 
     temp = document.createElement('div'); 
    temp.innerHTML = htmlStr; 
    while (temp.firstChild) { 
     frag.appendChild(temp.firstChild); 
    } 
    return frag; 
} 

var fragment = create('<div>Hello!</div><p>...</p>'); 
// You can use native DOM methods to insert the fragment: 
document.body.insertBefore(fragment, document.body.childNodes[0]); 

Beneficios:

1. Puede usar métodos DOM nativos para insertar tales como insertBefore, appendChild etc.
2. Tiene acceso a los nodos DOM reales antes de que se inserten; puedes acceder al objeto childNodes del fragmento.
3. El uso de fragmentos de documentos es muy rápido; más rápido que crear elementos fuera del DOM y en ciertas situaciones más rápido que innerHTML.

---

Aunque innerHTML se utiliza dentro de la función, todo está sucediendo fuera del DOM por lo que es mucho más rápido de lo que parece ...

Answer 2

En JavaScript vieja escuela, usted puede hacer esto:

document.body.innerHTML = '<p id="foo">Some HTML</p>' + document.body.innerHTML; 

En respuesta a tu comentario:

[...] que estaba interesado en la declaración de la fuente de los atributos y eventos de un nuevo elemento, no el innerHTML de un elemento.

Sin embargo, debe insertar el nuevo HTML en el DOM; es por eso que innerHTML se usa en el ejemplo de JavaScript de la vieja escuela. El innerHTML del elemento BODY se antepone con el nuevo HTML. No estamos realmente tocando el HTML existente dentro del BODY.

voy a reescribir el ejemplo antes citado para aclarar esto:

var newElement = '<p id="foo">This is some dynamically added HTML. Yay!</p>'; 
var bodyElement = document.body; 
bodyElement.innerHTML = newElement + bodyElement.innerHTML; 
// note that += cannot be used here; this would result in 'NaN' 

El uso de un marco de JavaScript haría que este código mucho menos detallado y mejorar la legibilidad. Por ejemplo, jQuery le permite hacer lo siguiente:

$('body').prepend('<p id="foo">Some HTML</p>'); 

Answer 3

Que yo sepa, que, a ser justo, es bastante nuevo y limitado, el único problema potencial con esta técnica es el hecho de que no puede crear dinámicamente algunos elementos de la tabla.

Utilizo un formulario para plantillas agregando elementos de "plantilla" a un DIV oculto y luego usando cloneNode (verdadero) para crear un clon y anexarlo según sea necesario. Tenga en cuenta que no necesita asegurarse de volver a asignar id como sea necesario para evitar la duplicación.

Answer 4

desea que esta

document.body.insertAdjacentHTML('afterbegin', '<div id="myID">...</div>'); 

Answer 5

Si desea insertar código HTML dentro de utilización de etiquetas de página existente Jnerator. Esta herramienta fue creada especialmente para este objetivo.

En lugar de escribir código siguiente

var htmlCode = '<ul class=\'menu-countries\'><li 
     class=\'item\'><img src=\'au.png\'></img><span>Australia </span></li><li 
     class=\'item\'><img src=\'br.png\'> </img><span>Brazil</span></li><li 
     class=\'item\'> <img src=\'ca.png\'></img><span>Canada</span></li></ul>'; 
    var element = document.getElementById('myTag'); 
    element.innerHTML = htmlCode; 

Puede escribir estructura más comprensible

var jtag = $j.ul({ 
     class: 'menu-countries', 
     child: [ 
      $j.li({ class: 'item', child: [ 
       $j.img({ src: 'au.png' }), 
       $j.span({ child: 'Australia' }) 
      ]}), 
      $j.li({ class: 'item', child: [ 
       $j.img({ src: 'br.png' }), 
       $j.span({ child: 'Brazil' }) 
      ]}), 
      $j.li({ class: 'item', child: [ 
       $j.img({ src: 'ca.png' }), 
       $j.span({ child: 'Canada' }) 
      ]}) 
     ] 
    }); 
    var htmlCode = jtag.html(); 
    var element = document.getElementById('myTag'); 
    element.innerHTML = htmlCode; 

Answer 6

Tenga una mirada en insertAdjacentHTML

var element = document.getElementById("one"); 
var newElement = '<div id="two">two</div>' 
element.insertAdjacentHTML('afterend', newElement) 
// new DOM structure: <div id="one">one</div><div id="two">two</div> 

posición es la posición en relación con el elemen t va a insertar adyacente a:

'beforebegin' Antes de que el propio elemento

'afterBegin' Justo dentro del elemento, antes de su primer hijo

'beforeend' Justo dentro del elemento, después de su último hijo

'afterend' Después de que el propio elemento

Answer 7

Como otros dijeron que la funcionalidad conveniente jQuery prepend puede ser emulado:

var html = '<div>Hello prepended</div>'; 
document.body.innerHTML = html + document.body.innerHTML; 

Aunque algunos dicen que no es mejor "desastre" con innerHtml, es fiable en muchas casos de uso, si lo saben:

Si a, <span> o <noembed> nodo <div> tiene un nodo de texto niño que incluye los caracteres (&), (<) o (>), innerHTML devuelve estos caracteres como &amp, &lt y &gt respectivamente. Use Node.textContent para obtener una copia correcta de los contenidos de estos nodos de texto.

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

O:

var html = '<div>Hello prepended</div>'; 
document.body.insertAdjacentHTML('afterbegin', html) 

insertAdjacentHTML es probablemente una buena alternativa: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML