Chèn HTML vào một div

Tôi đang cố gắng chèn một đoạn HTML vào một div. Tôi muốn xem liệu cách sử dụng JavaScript thuần túy có nhanh hơn cách sử dụng jQuery hay không. Thật không may, tôi đã quên cách làm theo cách 'cũ'. : 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);
}

Tôi đang làm gì sai ở đây vậy các bạn?

chỉnh sửa :
Có người hỏi cái nào nhanh hơn, jquery hay js đơn giản nên tôi đã viết một bài kiểm tra:
http://jsperf.com/html-insertion-js-vs-jquery

js đơn giản nhanh hơn 10%

Tôi nghĩ đây là những gì bạn muốn:

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

Hãy nhớ rằng innerHTML không thể truy cập được cho tất cả các loại thẻ khi sử dụng IE. (các thành phần bảng chẳng hạn)

Sử dụng JQuery sẽ giải quyết vấn đề không nhất quán của trình duyệt. Với thư viện jquery có trong dự án của bạn, chỉ cần viết:

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

Bạn cũng có thể cân nhắc sử dụng:

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

Thao tác này sẽ thêm thư viện của bạn làm mục cuối cùng trong div đã chọn. Hoặc là:

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

Điều này sẽ thêm nó làm mục đầu tiên trong div đã chọn.

Xem tài liệu JQuery cho các hàm này:

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

Tôi sử dụng "+" (dấu cộng) để chèn div vào html:

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

Hy vọng điều này giúp đỡ.

Thay vào đó, bạn có thể sử dụng insertAdjacentHTML - tuy nhiên, tôi đã tìm hiểu và thực hiện một số bài kiểm tra hiệu suất - (2019.09.13 Friday) MacOs High Sierra 10.13.6 trên Chrome 76.0.3809 (64-bit), Safari 12.1.2 (13604.5.6), Firefox 69.0.0 (64-bit)). Bài kiểm tra F chỉ mang tính chất tham khảo - nó nằm ngoài phạm vi câu hỏi vì chúng ta cần chèn html động - nhưng ở F tôi làm điều đó bằng 'tay' (theo cách tĩnh) - về mặt lý thuyết (theo tôi biết) thì điều này sẽ là cách nhanh nhất để chèn các phần tử html mới.

TÓM LƯỢC

• Các A innerHTML = (Đừng nhầm lẫn với +=) là nhanh nhất (Safari 48k phép tính mỗi giây, Firefox 43k op / giây, Chrome 23k op / giây) Các Một là ~ 31% chậm hơn so với giải pháp lý tưởng F chỉ chrome nhưng trên safari và firefox thì nhanh hơn ( !)
• Các B innerHTML +=... là chậm nhất trên tất cả các trình duyệt (Chrome 95 op / giây, Firefox 88 op / giây, Sfari 84 op / giây)
• các D jQuery là thứ hai chậm trên tất cả các trình duyệt (Safari 14 op / giây, Firefox 11k op / giây, Chrome 7k op / giây)
• Giải pháp tham chiếu F (nhanh nhất về mặt lý thuyết) không phải là nhanh nhất trên firefox và safari (!!!) - thật đáng ngạc nhiên
• Trình duyệt nhanh nhất là Safari

Thông tin thêm về việc tại sao innerHTML =là nhanh hơn nhiều so với innerHTML +=là ở đây . Bạn có thể thực hiện kiểm tra trên máy / trình duyệt của mình TẠI ĐÂY

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>

Và nhiều dòng có thể trông như thế này. Html ở đây chỉ là mẫu.

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