Insertar HTML en un div

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 a la "antigua" forma. :PAGS

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

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)

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:

• http://api.jquery.com/append/
• http://api.jquery.com/prepend/

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

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

Espero que esto ayude.

Como alternativa, puede usar insertAdjectedHTML , sin embargo, profundizo y hago algunas pruebas de rendimiento (viernes de 2019.09.13) 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 bits)). 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), teóricamente (hasta donde yo sé) este debería ser el forma más rápida de insertar nuevos elementos html.

RESUMEN

• La A innerHTML = (no confundir con +=) es la más rápida (Safari 48k operaciones por segundo, Firefox 43k op / seg, Chrome 23k op / seg) La A es ~ 31% más lenta que la solución ideal F solo Chrome pero en Safari y Firefox es más rápido ( !)
• La B innerHTML +=... es más lenta en todos los navegadores (Chrome 95 op / sec, Firefox 88 op / sec, Sfari 84 op / sec)
• El 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 la más rápida) no es la más rápida en firefox y safari (!!!), lo cual es sorprendente
• El navegador más rápido fue Safari

Más información acerca de por qué innerHTML =es mucho más rápido que innerHTML +=está 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>

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="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);