javascript - Sette inn HTML i en div

Jeg prøver å sette inn et stykke HTML i en div. Jeg vil se om ren JavaScript-metode er raskere enn å bruke jQuery. Dessverre har jeg glemt hvordan man gjør det på den 'gamle' måten. :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);
}

Hva gjør jeg galt her, folkens?

rediger:
Noen spurte hvilken som er raskere, jquery eller vanlig js, så jeg skrev en test:
https://jsben.ch/FBQYM

ren js er 10 % raskere

Svar #1

Jeg tror dette er det du vil ha:

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

Husk at innerHTML ikke er tilgjengelig for alle typer tagger når du bruker IE. (tabellelementer for eksempel)

Svar #2

Å bruke JQuery ville ta seg av den nettleserinkonsistensen. Med jquery-biblioteket inkludert i prosjektet ditt, skriv ganske enkelt:

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

Du kan også vurdere å bruke:

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

Dette vil legge til galleriet ditt som det siste elementet i den valgte div-en. Eller:

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

Dette vil legge det til som det første elementet i den valgte div-en.

Se JQuery-dokumentasjonen for disse funksjonene:

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

Svar #3

Jeg bruker "+" (pluss) for å sette inn div i HTML:

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

Håper dette hjelper.

Svar #4

Som alternativ kan du bruke insertAdjacentHTML - men jeg gravde inn i det og gjorde noen ytelsestester - (2019.09.13 fredag) MacOs High Sierra 10.13.6 på Chrome 76.0.3809 (64-bit), Safari 12.1.2 (13604.5.6), Firefox 69.0.0 (64-bit)). Testen F er kun for referanse - den er utenfor spørsmålomfanget fordi vi trenger å sette inn HTML dynamisk - men i F gjør jeg det 'for hånd' (på en statisk måte) - teoretisk (så langt jeg vet) bør dette være den raskeste måten å sette inn nye HTML-elementer på.

OPPSUMMERING

  • The A innerHTML = (ikke forveksle med +=) er raskest (Safari 48k operasjoner per sekund, Firefox 43k op/s, Chrome 23k op/s) The A er ~31% tregere enn ideell løsning F kun i Chrome, men på Safari og Firefox er den raskere (!)
  • B innerHTML +=... er tregest på alle nettlesere (Chrome 95 op/s, Firefox 88 op/s, Safari 84 op/s)
  • Den D jQuery er den nest tregeste på alle nettlesere (Safari 14 op/sec, Firefox 11k op/sec, Chrome 7k op/sec)
  • Referanseløsningen F (teoretisk raskest) er ikke raskest på Firefox og Safari (!!!) - noe som er overraskende
  • Den raskeste nettleseren var Safari

Mer informasjon om hvorfor innerHTML = er mye raskere enn innerHTML += finnes her. Du kan utføre tester på din maskin/naviger HER

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>

Svar #5

document.getElementById('tag-id').insertAdjacentHTML("beforebegin",'<ol><li>html data</li></ol>')

'beforebegin': Før selve elementet
'afterbegin': Rett innenfor elementet, før dets første barn
'beforeend': Rett innenfor elementet, etter dets siste barn
'afterend': Etter selve elementet

Flere detaljer: developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Svar #6

Og mange linjer kan se slik ut. HTML-en her er bare et eksempel.

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

Relaterte artikler