Chèn HTML vào một div

Question

Tôi đang cố chèn một đoạn HTML vào một div. Tôi muốn xem cách JavaScript đơn giản có nhanh hơn jQuery hay không. Thật không may, tôi quên làm thế nào để làm điều đó 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ì ở đây?

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

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

Answer 1

Tôi nghĩ rằng đâ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 đối với tất cả các loại thẻ khi sử dụng IE. (ví dụ: các phần tử bảng)

Answer 2

Sử dụng JQuery sẽ giải quyết sự không thống nhất của trình duyệt đó. Với thư viện jquery bao gồm trong dự án của bạn chỉ đơn giản viết:

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

Bạn cũng có thể xem xét sử dụng:

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

này sẽ bổ sung thêm bộ sưu tập của bạn như là mục cuối cùng trong div chọn. Hoặc:

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

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

Xem các tài liệu JQuery cho các chức năng này:

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

Answer 3

tôi sử dụng "+" (cộng) để chèn div html:

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

Hy vọng sự trợ giúp này.

Answer 4

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