2009-05-02 17 views
85

En lugar de tediosamente buscar soluciones para cada tipo de atributo y el evento cuando se utiliza la siguiente sintaxis:Inserción de elementos HTML con JavaScript

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]); 

Respuesta

113

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 ...

+3

Apuesto a que createDocumentFragment() no sería tan bueno como el "heredado" innerHTML. –

+0

Realmente me gustaría la compatibilidad con versiones anteriores, así que ¿cómo podría usar esto junto con innerHTML, como verifico si este método no es nulo, tal vez? –

+2

Este método funciona en todos los navegadores modernos. Para IE 5.5 y posteriores, puede realizar una comprobación como :: if (document.createDocumentFragment) {create ('...'); } else {/ * Use innerHTML quizás * /} – James

18

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>'); 
+0

Bastante bueno. Pero estaba interesado en declarar la fuente de los atributos y eventos de un nuevo elemento, no el innerHTML de un elemento. –

+0

Quizás mi última edición aclare las cosas. –

+0

¿Puedo usar "document.body" en lugar de "document.getElementsByTagName" ?? ¿No sería más compatible con versiones anteriores? –

1

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.

71

desea que esta

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

no estoy seguro de por qué esta no es la respuesta aceptada. Esto es mucho más simple y más obviamente correcto –

+0

@JonnyLeeds Esto no parece funcionar en el elemento 'body', pero funciona bien en cualquier otro elemento. – Phill

+0

@Phill Por supuesto, funciona en ''. De hecho, ejecutarlo en '' es mi método estándar para inyectar cosas como hojas de estilo en páginas web a través de la consola. ¿Qué problema tienes? –

0

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; 
20

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

0

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

Cuestiones relacionadas