Inserimento di HTML in un div

Question

Sto cercando di inserire un blocco di HTML in un div. Voglio vedere se la semplice modalità JavaScript è più veloce di usare jQuery. Purtroppo, ho dimenticato come farlo nel modo "vecchio". : 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?

modificare:
Qualcuno ha chiesto che è più veloce, jQuery o js pianura così ho scritto un test:
http://jsperf.com/html-insertion-js-vs-jquery

JS pianura è più veloce del 10%

Answer 1

Credo che questo è ciò che si vuole:

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

Tenete a mente che innerHTML non è disponibile per tutti i tipi di tag quando usando IE. (elementi della tabella, ad esempio)

Answer 2

L'utilizzo di JQuery si sarebbe occupato dell'incoerenza del browser. Con la libreria jQuery incluso nel progetto è sufficiente scrivere:

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

Si può anche considerare utilizzando:

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

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

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

Questo lo aggiungerà come primo elemento nel div selezionato.

Vedi la documentazione JQuery per queste funzioni:

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

Answer 3

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

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

Spero che questo aiuto.

Answer 4

E molte linee possono assomigliare a questo. L'html qui è solo campione.

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