Inserimento di HTML in un div

Sto cercando di inserire un pezzo di HTML in un div. Voglio vedere se il semplice modo JavaScript è più veloce rispetto all'utilizzo di jQuery. Sfortunatamente, ho dimenticato come farlo alla "vecchia" maniera. : P

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

cosa sto facendo di sbagliato qui ragazzi?

modifica :
qualcuno ha chiesto quale fosse più veloce, jquery o plain js, quindi ho scritto un test:
http://jsperf.com/html-insertion-js-vs-jquery

plain js è il 10% più veloce

Penso che questo sia quello che vuoi:

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

Tieni presente che innerHTML non è accessibile per tutti i tipi di tag quando si utilizza IE. (elementi della tabella per esempio)

L'uso di JQuery si sarebbe preso cura di quell'incoerenza del browser. Con la libreria jquery inclusa nel tuo progetto scrivi semplicemente:

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

Puoi anche considerare di utilizzare:

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

Questo aggiungerà la tua galleria come ultimo elemento nel div selezionato. O:

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

Questo lo aggiungerà come primo elemento nel div selezionato.

Consulta la documentazione di JQuery per queste funzioni:

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

Utilizzo "+" (più) per inserire div in html:

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

Spero che questo aiuto.

In alternativa puoi usare insertAdjacentHTML - tuttavia ho scavato e ho fatto alcuni test delle prestazioni - (2019.09.13 venerdì) MacOs High Sierra 10.13.6 su Chrome 76.0.3809 (64-bit), Safari 12.1.2 (13604.5.6), Firefox 69.0.0 (64 bit)). Il test F è solo di riferimento - è fuori dall'ambito della domanda perché dobbiamo inserire dinamicamente html - ma in F lo faccio a mano (in modo statico) - teoricamente (per quanto ne so) questo dovrebbe essere il modo più veloce per inserire nuovi elementi html.

SOMMARIO

• L' A innerHTML = (da non confondere con +=) è il più veloce (Safari 48k operazioni al secondo, Firefox 43k op / sec, Chrome 23k op / sec) L' A è ~ 31% più lento della soluzione ideale F solo chrome ma su safari e firefox è più veloce ( !)
• Il B innerHTML +=... è il più lento su tutti i browser (Chrome 95 op / sec, Firefox 88 op / sec, Sfari 84 op / sec)
• Il D jQuery è seconda lenta su tutti i browser (Safari 14 op / sec, Firefox 11k op / sec, Chrome 7k op / sec)
• La soluzione di riferimento F (teoricamente più veloce) non è la più veloce su Firefox e Safari (!!!) - il che è sorprendente
• Il browser più veloce è stato Safari

Maggiori informazioni sul motivo per cui innerHTML =è molto più veloce di quanto non innerHTML +=sia qui . Puoi eseguire il test sulla tua macchina / browser QUI

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>

E molte righe possono assomigliare a questa. L'html qui è solo di esempio.

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