Estoy tratando de insertar un fragmento de HTML en un div. Quiero ver si la forma simple de JavaScript es más rápida que usar jQuery. Desafortunadamente, olvidé cómo hacerlo de la manera «antigua». :PAG

var test2 = function(){
    var cb = function(html){
        var t1 = document.getElementById("test2");
        var d = document.createElement("div");
        d.id ="oiio";
        d.innerHtml = html;
        t1.appendChild(d);
        console.timeEnd("load data with javascript");
    };
    console.time("load data with javascript");
    $.get("test1.html", cb);
}

¿Qué estoy haciendo mal aquí chicos?

editar:
Alguien preguntó cuál es más rápido, jquery o js simple, así que escribí una prueba:
http://jsperf.com/html-insertion-js-vs-jquery

plain js es un 10% más rápido

0

Creo que esto es lo que quieres:

document.getElementById('tag-id').innerHTML = '<ol><li>html data</li></ol>';

Tenga en cuenta que innerHTML no es accesible para todos los tipos de etiquetas cuando se usa IE. (elementos de la tabla, por ejemplo)

2

El uso de JQuery se encargaría de esa inconsistencia del navegador. Con la biblioteca jquery incluida en su proyecto, simplemente escriba:

$('#yourDivName').html('yourtHTML');

También puede considerar usar:

$('#yourDivName').append('yourtHTML');

Esto agregará su galería como el último elemento en el div seleccionado. O:

$('#yourDivName').prepend('yourtHTML');

Esto lo agregará como el primer elemento en el div seleccionado.

Consulte los documentos de JQuery para estas funciones:

3

Estoy usando «+» (más) para insertar div en html:

document.getElementById('idParent').innerHTML += '<div id="idChild"> content html </div>';

Espero que esto ayude.

1

Como alternativa puedes usar insertAdherentHTML – sin embargo, profundizo y hago algunas pruebas de rendimiento – (2019.09.13 viernes) MacOs High Sierra 10.13.6 en Chrome 76.0.3809 (64 bits), Safari 12.1.2 (13604.5.6), Firefox 69.0.0 (64 -poco) ). La prueba F es solo para referencia, está fuera del alcance de la pregunta porque necesitamos insertar html dinámicamente, pero en F Lo hago a mano (de forma estática); en teoría (hasta donde yo sé), esta debería ser la forma más rápida de insertar nuevos elementos html.

ingrese la descripción de la imagen aquí

RESUMEN

  • los A innerHTML = (no confunda con +=) es el más rápido (Safari 48k operaciones por segundo, Firefox 43k op / seg, Chrome 23k op / seg) A es ~ 31% más lento que la solución ideal F solo Chrome, pero en Safari y Firefox es más rápido (!)
  • los B innerHTML +=... es más lento en todos los navegadores (Chrome 95 op / sec, Firefox 88 op / sec, Sfari 84 op / sec)
  • los D jQuery es el segundo más lento en todos los navegadores (Safari 14 op / seg, Firefox 11k op / seg, Chrome 7k op / seg)
  • La solución de referencia F (teóricamente más rápido) no es más rápido en firefox y safari (!!!), lo cual es sorprendente
  • El navegador más rápido fue Safari

Más información sobre por qué innerHTML = es mucho más rápido que innerHTML += es aquí. Puede realizar la prueba en su máquina / navegador AQUÍ

let html = "<div class="box">Hello <span class="msg">World</span> !!!</div>"

function A() {    
  container.innerHTML = `<div id="A_oiio">A: ${html}</div>`;
}

function B() {    
  container.innerHTML += `<div id="B_oiio">B: ${html}</div>`;
}

function C() {    
  container.insertAdjacentHTML('beforeend', `<div id="C_oiio">C: ${html}</div>`);
}

function D() {    
  $('#container').append(`<div id="D_oiio">D: ${html}</div>`);
}

function E() {
  let d = document.createElement("div");
  d.innerHTML = `E: ${html}`;
  d.id = 'E_oiio';
  container.appendChild(d);
}

function F() {    
  let dm = document.createElement("div");
  dm.id = "F_oiio";
  dm.appendChild(document.createTextNode("F: "));

  let d = document.createElement("div");
  d.classList.add('box');
  d.appendChild(document.createTextNode("Hello "));
  
  let s = document.createElement("span");
  s.classList.add('msg');
  s.appendChild(document.createTextNode("World"));

  d.appendChild(s);
  d.appendChild(document.createTextNode(" !!!"));
  dm.appendChild( d );
  
  container.appendChild(dm);
}


A();
B();
C();
D();
E();
F();
.warr { color: red } .msg { color: blue } .box {display: inline}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="warr">This snippet only for show code used in test (in jsperf.com) - it not perform test itself. </div>
<div id="container"></div>

1

Y muchas líneas pueden verse así. El html aquí es solo una muestra.

var div = document.createElement("div");

div.innerHTML =
    '<div class="slideshow-container">n' +
    '<div class="mySlides fade">n' +
    '<div class="numbertext">1 / 3</div>n' +
    '<img src="https://stackoverflow.com/questions/584751/image1.jpg" style="width:100%">n' +
    '<div class="text">Caption Text</div>n' +
    '</div>n' +

    '<div class="mySlides fade">n' +
    '<div class="numbertext">2 / 3</div>n' +
    '<img src="image2.jpg" style="width:100%">n' +
    '<div class="text">Caption Two</div>n' +
    '</div>n' +

    '<div class="mySlides fade">n' +
    '<div class="numbertext">3 / 3</div>n' +
    '<img src="image3.jpg" style="width:100%">n' +
    '<div class="text">Caption Three</div>n' +
    '</div>n' +

    '<a class="prev" onclick="plusSlides(-1)">&#10094;</a>n' +
    '<a class="next" onclick="plusSlides(1)">&#10095;</a>n' +
    '</div>n' +
    '<br>n' +

    '<div style="text-align:center">n' +
    '<span class="dot" onclick="currentSlide(1)"></span> n' +
    '<span class="dot" onclick="currentSlide(2)"></span> n' +
    '<span class="dot" onclick="currentSlide(3)"></span> n' +
    '</div>n';

document.body.appendChild(div);

document.getElementById('tag-id').insertAdjacentHTML("beforebegin",'<ol><li>html data</li></ol>')

‘beforebegin’: antes del 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 del elemento en sí

Más detalles : developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjectedHTML

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas