Memasukkan HTML ke dalam div

Saya mencoba memasukkan sepotong HTML ke dalam div. Saya ingin melihat apakah cara JavaScript biasa lebih cepat daripada menggunakan jQuery. Sayangnya, saya lupa bagaimana melakukannya dengan cara 'lama'. : 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);
}

apa yang saya lakukan salah di sini kawan?

edit :
Seseorang bertanya mana yang lebih cepat, jquery atau js biasa jadi saya menulis tes:
http://jsperf.com/html-insertion-js-vs-jquery

js biasa 10% lebih cepat

Saya pikir inilah yang Anda inginkan:

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

Perlu diingat bahwa innerHTML tidak dapat diakses untuk semua jenis tag saat menggunakan IE. (elemen tabel misalnya)

Menggunakan JQuery akan mengatasi ketidakkonsistenan browser itu. Dengan perpustakaan jquery yang disertakan dalam proyek Anda, cukup tulis:

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

Anda juga dapat mempertimbangkan untuk menggunakan:

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

Ini akan menambahkan galeri Anda sebagai item terakhir di div yang dipilih. Atau:

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

Ini akan menambahkannya sebagai item pertama di div yang dipilih.

Lihat dokumen JQuery untuk fungsi-fungsi ini:

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

Saya menggunakan "+" (plus) untuk memasukkan div ke html:

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

Semoga bantuan ini.

Sebagai alternatif, Anda dapat menggunakan sisipanHTML - namun saya menggali dan membuat beberapa tes kinerja - (2019.09.13 Jumat) MacOs High Sierra 10.13.6 di Chrome 76.0.3809 (64-bit), Safari 12.1.2 (13604.5.6), Firefox 69.0.0 (64-bit)). Tes F hanya untuk referensi - itu di luar cakupan pertanyaan karena kita perlu memasukkan html secara dinamis - tetapi di F saya melakukannya dengan 'tangan' (dengan cara statis) - secara teoritis (sejauh yang saya tahu) ini seharusnya menjadi cara tercepat untuk memasukkan elemen html baru.

RINGKASAN

• The A innerHTML = (tidak bingung dengan +=) adalah tercepat (Safari 48k operasi per detik, Firefox 43k op / sec, Chrome 23k op / detik) yang A adalah ~ 31% lebih lambat dari solusi ideal F hanya chrome tapi di safari dan firefox lebih cepat ( !)
• The B innerHTML +=... paling lambat pada semua browser (Chrome 95 op / detik, Firefox 88 op / sec, Sfari 84 op / detik)
• The D jQuery kedua lambat pada semua browser (Safari 14 op / detik, Firefox 11k op / sec, Chrome 7k op / detik)
• Solusi referensi F (secara teoritis tercepat) tidak tercepat di firefox dan safari (!!!) - yang mengejutkan
• Browser tercepat adalah Safari

Info lebih lanjut tentang mengapa innerHTML =jauh lebih cepat dari innerHTML +=yang di sini . Anda dapat melakukan pengujian di mesin / browser Anda DI SINI

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>

Dan banyak garis mungkin terlihat seperti ini. Html di sini hanya contoh.

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