divにHTMLを挿入する

Question

divにチャンクを挿入しようとしています。私は、単純なJavaScriptの方法がjQueryを使うよりも速いかどうかを見たいと思っています。残念ながら、私はそれを「古い」方法でやるのを忘れていました。 ：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); 
} 

私はここで間違っていますか？

編集：
誰かが尋ねた、より高速なjqueryのか、無地のjsであるので、私は、テストまで書いた：

Answer 1

私は、これは何だと思います
http://jsperf.com/html-insertion-js-vs-jquery

無地のjsを10％高速化されます必要：

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

すべてのタイプのタグでは、innerHTMLにアクセスできませんIEを使用します。 （テーブル要素など）

Answer 2

JQueryを使用すると、そのブラウザの不一致が処理されます。 jQueryライブラリがプロジェクトに含めると、単に書く：

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

あなたはまた、使用することを検討してください可能性があります

は

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

これは、選択したdiv要素内の最後の項目としてあなたのギャラリーを追加します。または：

これは、選択したdivの最初の項目として追加します。

、これらの機能のためのjQueryのドキュメントを参照してください：

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

Answer 3

私はHTMLにdiv要素を挿入するには、 "+"（プラス）を使用して：

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

このヘルプが必要です。

Answer 4

多くの行がこのように表示されることがあります。ここのhtmlはサンプルのみです。

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