I am trying to insert a chunk of HTML into a div. I want to see if plain JavaScript way is faster than using jQuery. Unfortunately, I forgot how to do it the 'old' way. :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);
}
what am i doing wrong here guys?
edit:
Someone asked which is faster, jquery or plain js so i wrote up a test:
http://jsperf.com/html-insertion-js-vs-jquery
plain js is 10% faster
This question is related to
javascript
I think this is what you want:
document.getElementById('tag-id').innerHTML = '<ol><li>html data</li></ol>';
Keep in mind that innerHTML is not accessible for all types of tags when using IE. (table elements for example)
As alternative you can use insertAdjacentHTML - however I dig into and make some performance tests - (2019.09.13 Friday) MacOs High Sierra 10.13.6 on Chrome 76.0.3809 (64-bit), Safari 12.1.2 (13604.5.6), Firefox 69.0.0 (64-bit) ). The test F is only for reference - it is out of the question scope because we need to insert dynamically html - but in F I do it by 'hand' (in static way) - theoretically (as far I know) this should be the fastest way to insert new html elements.
SUMMARY
innerHTML =
(do not confuse with +=
) is fastest (Safari 48k operations per second, Firefox 43k op/sec, Chrome 23k op/sec) The A is ~31% slower than ideal solution F only chrome but on safari and firefox is faster (!)innerHTML +=...
is slowest on all browsers (Chrome 95 op/sec, Firefox 88 op/sec, Sfari 84 op/sec)More info about why innerHTML =
is much faster than innerHTML +=
is here. You can perform test on your machine/browser HERE
let html = "<div class='box'>Hello <span class='msg'>World</span> !!!</div>"_x000D_
_x000D_
function A() { _x000D_
container.innerHTML = `<div id="A_oiio">A: ${html}</div>`;_x000D_
}_x000D_
_x000D_
function B() { _x000D_
container.innerHTML += `<div id="B_oiio">B: ${html}</div>`;_x000D_
}_x000D_
_x000D_
function C() { _x000D_
container.insertAdjacentHTML('beforeend', `<div id="C_oiio">C: ${html}</div>`);_x000D_
}_x000D_
_x000D_
function D() { _x000D_
$('#container').append(`<div id="D_oiio">D: ${html}</div>`);_x000D_
}_x000D_
_x000D_
function E() {_x000D_
let d = document.createElement("div");_x000D_
d.innerHTML = `E: ${html}`;_x000D_
d.id = 'E_oiio';_x000D_
container.appendChild(d);_x000D_
}_x000D_
_x000D_
function F() { _x000D_
let dm = document.createElement("div");_x000D_
dm.id = "F_oiio";_x000D_
dm.appendChild(document.createTextNode("F: "));_x000D_
_x000D_
let d = document.createElement("div");_x000D_
d.classList.add('box');_x000D_
d.appendChild(document.createTextNode("Hello "));_x000D_
_x000D_
let s = document.createElement("span");_x000D_
s.classList.add('msg');_x000D_
s.appendChild(document.createTextNode("World"));_x000D_
_x000D_
d.appendChild(s);_x000D_
d.appendChild(document.createTextNode(" !!!"));_x000D_
dm.appendChild( d );_x000D_
_x000D_
container.appendChild(dm);_x000D_
}_x000D_
_x000D_
_x000D_
A();_x000D_
B();_x000D_
C();_x000D_
D();_x000D_
E();_x000D_
F();
_x000D_
.warr { color: red } .msg { color: blue } .box {display: inline}
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
_x000D_
<div class="warr">This snippet only for show code used in test (in jsperf.com) - it not perform test itself. </div>_x000D_
<div id="container"></div>
_x000D_
I using "+" (plus) to insert div to html :
document.getElementById('idParent').innerHTML += '<div id="idChild"> content html </div>';
Hope this help.
And many lines may look like this. The html here is sample only.
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)">❮</a>\n' +
'<a class="next" onclick="plusSlides(1)">❯</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);
Using JQuery would take care of that browser inconsistency. With the jquery library included in your project simply write:
$('#yourDivName').html('yourtHTML');
You may also consider using:
$('#yourDivName').append('yourtHTML');
This will add your gallery as the last item in the selected div. Or:
$('#yourDivName').prepend('yourtHTML');
This will add it as the first item in the selected div.
See the JQuery docs for these functions:
Source: Stackoverflow.com