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:
plain js is 10% faster
06 Answers
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)
2Using 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:
3I using "+" (plus) to insert div to html :
document.getElementById('idParent').innerHTML += '<div> content html </div>';
Hope this help.
2As 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
- The A
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 (!) - The B
innerHTML +=...is slowest on all browsers (Chrome 95 op/sec, Firefox 88 op/sec, Sfari 84 op/sec) - The D jQuery is second slow on all browsers (Safari 14 op/sec, Firefox 11k op/sec, Chrome 7k op/sec)
- The reference solution F (theoretically fastest) is not fastest on firefox and safari (!!!) - which is surprising
- The fastest browser was Safari
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>"
function A() { container.innerHTML = `<div>A: ${html}</div>`;
}
function B() { container.innerHTML += `<div>B: ${html}</div>`;
}
function C() { container.insertAdjacentHTML('beforeend', `<div>C: ${html}</div>`);
}
function D() { $('#container').append(`<div>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=""></script>
<div>This snippet only for show code used in test (in jsperf.com) - it not perform test itself. </div>
<div></div>And many lines may look like this. The html here is sample only.
var div = document.createElement("div");
div.innerHTML = '<div>\n' + '<div>\n' + '<div>1 / 3</div>\n' + '<img src="image1.jpg">\n' + '<div>Caption Text</div>\n' + '</div>\n' + '<div>\n' + '<div>2 / 3</div>\n' + '<img src="image2.jpg">\n' + '<div>Caption Two</div>\n' + '</div>\n' + '<div>\n' + '<div>3 / 3</div>\n' + '<img src="image3.jpg">\n' + '<div>Caption Three</div>\n' + '</div>\n' + '<a onclick="plusSlides(-1)">❮</a>\n' + '<a onclick="plusSlides(1)">❯</a>\n' + '</div>\n' + '<br>\n' + '<div>\n' + '<span onclick="currentSlide(1)"></span> \n' + '<span onclick="currentSlide(2)"></span> \n' + '<span onclick="currentSlide(3)"></span> \n' + '</div>\n';
document.body.appendChild(div);document.getElementById('tag-id').insertAdjacentHTML("beforebegin",'<ol><li>html data</li></ol>')'beforebegin': Before the element itself
'afterbegin': Just inside the element, before its first child
'beforeend': Just inside the element, after its last child
'afterend': After the element itself
More details :
