Insertar elementos HTML con JavaScript

dynamic-websites

Question

En lugar de buscar tediosamente soluciones para cada tipo de atributo y evento al usar 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 de declarar todo el elemento HTML como una cadena? me gusta:

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

Answer 1

Como otros dijeron, se puede emular la conveniente funcionalidad jQuery prepend :

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

Mientras que algunos dicen que es mejor no "meterse" con innerHTML , es confiable en muchos casos de uso, si sabes esto:

Si un nodo <div> , <span> , o <noembed> tiene un nodo de texto hijo 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: insertAdjacentHTML

Answer 2

Eche un vistazo a 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 relativa al elemento que está insertando junto a:

''beforebegin'' Antes del elemento en sí

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

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

''afterend'' después del elemento en sí

Answer 3

En el JavaScript de la escuela anterior, podrías hacer esto:

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

En respuesta a tu comentario:

[...] Estaba interesado en declarar la fuente de los atributos y eventos de un nuevo elemento, no el innerHTML de un elemento.

Sin embargo, necesitas inyectar 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. Realmente no estamos tocando el HTML existente dentro del BODY .

Reescribiré el ejemplo mencionado anteriormente 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 sea mucho menos detallado y mejore la legibilidad. Por ejemplo, jQuery le permite hacer lo siguiente:

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

Answer 4

En lugar de jugar directamente con innerHTML , sería mejor crear un fragmento y luego insertarlo:

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 utilizar métodos DOM nativos para la inserción, como insertBefore, appendChild, etc.
2. Usted 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 usa dentro de la función, todo está sucediendo fuera del DOM, por lo que es mucho más rápido de lo que crees ...

Answer 5

Que yo sepa, que, para ser justos, 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 6

Si desea insertar código HTML dentro de la etiqueta de la página existente, use Jnerator . Esta herramienta fue creada especialmente para este objetivo.

En lugar de escribir el próximo código

    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;

Puedes escribir una 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 7

Tu quieres esto

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