HTML invoegen in een div

Ik probeer een stuk HTML in een div in te voegen. Ik wil zien of een gewone JavaScript-manier sneller is dan het gebruik van jQuery. Helaas ben ik vergeten hoe ik het op de ‘oude’ manier moet doen. 😛

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

wat doe ik hier verkeerd jongens?

bewerken:
Iemand vroeg wat sneller is, jQuery of gewoon js, dus schreef ik een test:
http://jsperf.com/html-insertion-js-vs-jquery

plain js is 10% sneller

Antwoord 1, autoriteit 100%

Ik denk dat dit is wat je wilt:

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

Houd er rekening mee dat innerHTML niet voor alle typen tags toegankelijk is bij gebruik van IE. (tabelelementen bijvoorbeeld)

Antwoord 2, autoriteit 28%

Het gebruik van JQuery zou voor die inconsistentie in de browser zorgen. Met de jQuery-bibliotheek die in uw project is opgenomen, schrijft u gewoon:

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

U kunt ook overwegen het volgende te gebruiken:

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

Hiermee wordt uw galerij toegevoegd als het laatste item in de geselecteerde div. Of:

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

Dit zal het toevoegen als het eerste item in de geselecteerde div.

Bekijk de JQuery-documenten voor deze functies:

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

Antwoord 3, autoriteit 22%

Ik gebruik “+” (plus) om div in te voegen in html :

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

Ik hoop dat dit helpt.

Antwoord 4, autoriteit 16%

Als alternatief kunt u insertAdjacentHTMLgebruiken – echter Ik duik in en voer enkele prestatietests uit – (2019.09.13 vrijdag) MacOs High Sierra 10.13.6 op Chrome 76.0.3809 (64-bit), Safari 12.1.2 (13604.5.6), Firefox 69.0.0 (64-bit ) ). De test Fis alleen ter referentie – het valt buiten de vraagstelling omdat we dynamisch html moeten invoegen – maar in Fdoe ik het ‘hand’ (in statische manier) – theoretisch (voor zover ik weet) zou dit de snelste manier moeten zijn om nieuwe html-elementen in te voegen.

OVERZICHT

• De AinnerHTML =(niet te verwarren met +=) is het snelst (Safari 48k-bewerkingen per seconde, Firefox 43k op/sec , Chrome 23k op/sec) De Ais ~31% langzamer dan de ideale oplossing Falleen chrome maar op safari en firefox is sneller (!)
• De BinnerHTML +=...is het langzaamst in alle browsers (Chrome 95 op/sec, Firefox 88 op/sec, Sfari 84 op/sec)
• De DjQuery is tweede traag in alle browsers (Safari 14 op/sec, Firefox 11k op/sec, Chrome 7k op/sec)
• De referentieoplossing F(theoretisch snelste) is niet de snelste op Firefox en Safari (!!!) – wat verrassend is
• De snelste browser was Safari

Meer informatie over waarom innerHTML =veel sneller is dan innerHTML +=is hier. U kunt een test uitvoeren op uw computer/browser HIER

Antwoord 5, autoriteit 9%

En veel regels kunnen er zo uitzien. De html hier is slechts een voorbeeld.

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