Inserting HTML into a div

Question

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

User · Answer

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

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

_x000D_

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_

User · Answer

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    http   api jquery com append  http   api jquery com prepend

User · Answer

I think this is what you want  document getElementById  tag-id   innerHTML     lt ol gt  lt li gt html data lt  li gt  lt  ol gt     Keep in mind that innerHTML is not accessible for all types of tags when using IE   table elements for example

User · Answer

I using      plus  to insert div to html    document getElementById  idParent   innerHTML      lt div id  idChild  gt  content html  lt  div gt     Hope this help

User · Answer

And many lines may look like this  The html here is sample only   var div   document createElement  div     div innerHTML         lt div class  slideshow-container  gt  n          lt div class  mySlides fade  gt  n          lt div class  numbertext  gt 1   3 lt  div gt  n          lt img src  image1 jpg  style  width 100   gt  n          lt div class  text  gt Caption Text lt  div gt  n          lt  div gt  n           lt div class  mySlides fade  gt  n          lt div class  numbertext  gt 2   3 lt  div gt  n          lt img src  image2 jpg  style  width 100   gt  n          lt div class  text  gt Caption Two lt  div gt  n          lt  div gt  n           lt div class  mySlides fade  gt  n          lt div class  numbertext  gt 3   3 lt  div gt  n          lt img src  image3 jpg  style  width 100   gt  n          lt div class  text  gt Caption Three lt  div gt  n          lt  div gt  n           lt a class  prev  onclick  plusSlides -1   gt  amp  10094  lt  a gt  n          lt a class  next  onclick  plusSlides 1   gt  amp  10095  lt  a gt  n          lt  div gt  n          lt br gt  n           lt div style  text-align center  gt  n          lt span class  dot  onclick  currentSlide 1   gt  lt  span gt   n          lt span class  dot  onclick  currentSlide 2   gt  lt  span gt   n          lt span class  dot  onclick  currentSlide 3   gt  lt  span gt   n          lt  div gt  n    document body appendChild div

[javascript] Inserting HTML into a div

Examples related to javascript