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

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

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

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

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

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   x000D  let html     lt div class  box  gt Hello  lt span class  msg  gt World lt  span gt      lt  div gt   x000D   x000D  function A         x000D    container innerHTML     lt div id  A oiio  gt A    html  lt  div gt    x000D    x000D   x000D  function B         x000D    container innerHTML      lt div id  B oiio  gt B    html  lt  div gt    x000D    x000D   x000D  function C         x000D    container insertAdjacentHTML  beforeend     lt div id  C oiio  gt C    html  lt  div gt     x000D    x000D   x000D  function D         x000D        container   append   lt div id  D oiio  gt D    html  lt  div gt     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   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div class  warr  gt This snippet only for show code used in test  in jsperf com  - it not perform test itself   lt  div gt  x000D   lt div id  container  gt  lt  div gt  x000D   x000D   x000D

[javascript] Inserting HTML into a div

Examples related to javascript