javascript - Infoga HTML i en div

Jag försöker infoga en bit HTML i en div. Jag vill se om det vanliga JavaScript-sättet är snabbare än att använda jQuery. Tyvärr glömde jag hur man gör det på det 'gamla' sättet. :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);
}

vad gör jag för fel här, grabbar?

redigera:
Någon frågade vilken som är snabbare, jquery eller vanlig js, så jag skrev ett test:
https://jsben.ch/FBQYM

ren js är 10% snabbare

Svar #1

Jag tror att detta är vad du vill ha:

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

Tänk på att innerHTML inte är tillgängligt för alla typer av taggar när du använder IE. (tabelement till exempel)

Svar #2

Att använda JQuery skulle ta hand om det där webbläsarinkonsekvensen. Med jquery-biblioteket inkluderat i ditt projekt, skriv helt enkelt:

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

Du kan också överväga att använda:

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

Detta kommer att lägga till ditt galleri som det sista objektet i den valda div:en. Eller:

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

Detta kommer att lägga till det som det första objektet i den valda div:en.

Se JQuery-dokumentationen för dessa funktioner:

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

Svar #3

Jag använder "+" (plus) för att infoga div i HTML :

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

Hoppas detta hjälper.

Svar #4

Som alternativ kan du använda insertAdjacentHTML - dock grävde jag i det och gjorde några prestandatest - (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) ). Testet F är endast för referens - det är utanför frågans omfattning eftersom vi behöver infoga HTML dynamiskt - men i F gör jag det 'för hand' (på ett statiskt sätt) - teoretiskt (så vitt jag vet) borde detta vara det snabbaste sättet att infoga nya HTML-element.

SAMMANFATTNING

  • The A innerHTML = (blanda inte ihop med +=) är snabbast (Safari 48k operationer per sekund, Firefox 43k op/sec, Chrome 23k op/sec) The A är ~31% långsammare än den idealiska lösningen F endast på Chrome men på Safari och Firefox är den snabbare (!)
  • B innerHTML +=... är långsammast på alla webbläsare (Chrome 95 op/sec, Firefox 88 op/sec, Safari 84 op/sec)
  • Den D jQuery är den näst långsammaste på alla webbläsare (Safari 14 op/s, Firefox 11k op/s, Chrome 7k op/s)
  • Referenslösningen F (teoretiskt snabbast) är inte snabbast på Firefox och Safari (!!!) - vilket är förvånande
  • Den snabbaste webbläsaren var Safari

Mer information om varför innerHTML = är mycket snabbare än innerHTML += finns här. Du kan utföra tester på din maskin/webbläsare HÄR

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öre själva elementet
'afterbegin': Precis innanför elementet, före dess första barn
'beforeend': Precis innanför elementet, efter dess sista barn
'afterend': Efter själva elementet

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

Svar #6

Och många rader kan se ut så här. Html-koden här är bara ett exempel.

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

Relaterade artiklar