Appending HTML string to the DOM

Question

How to append this HTML string  var str     lt p gt Just some  lt span gt text lt  span gt  here lt  p gt      to the DIV with the ID  test  which is in the DOM    Btw div innerHTML    str  is not acceptable

User · Answer

Why is that not acceptable   document getElementById  test   innerHTML    str  would be the textbook way of doing it

User · Answer

Use insertAdjacentHTML if it s available  otherwise use some sort of fallback  insertAdjacentHTML is supported in all current browsers  div insertAdjacentHTML   beforeend   str     Live demo  http   jsfiddle net euQ5n

User · Answer

The idea is to use innerHTML on an intermediary element and then move all of its child nodes to where you really want them via appendChild   var target   document getElementById  test    var str     lt p gt Just some  lt span gt text lt  span gt  here lt  p gt     var temp   document createElement  div    temp innerHTML   str  while  temp firstChild      target appendChild temp firstChild       This avoids wiping out any event handlers on div test but still allows you to append a string of HTML

User · Answer

Performance  AppendChild  E  is more than 2x faster than other solutions on chrome and safari  insertAdjacentHTML F  is fastest on firefox  The innerHTML   B   do not confuse with     A   is second fast solution on all browsers and it is much more handy than E and F   Details  Set up environment  2019 07 10  MacOs High Sierra 10 13 4 on Chrome 75 0 3770  64-bit   Safari 11 1 0  13604 5 6   Firefox 67 0 0  64-bit       on Chrome E  140k operations per second  is fastest  B  47k  and F  46k  are second  A  332  is slowest  on firefox F  94k  is fastest  then B 80k   D  73k   E 64k   C  21k   slowest is A 466  on Safari E 207k  is fastest  then B 89k   F 88k   D 83k   C  25k   slowest is A 509     You can replay test in your machine here   x000D   x000D  function A         x000D    container innerHTML      lt p gt A  Just some  lt span gt text lt  span gt  here lt  p gt    x000D    x000D   x000D  function B         x000D    container innerHTML     lt p gt B  Just some  lt span gt text lt  span gt  here lt  p gt    x000D    x000D   x000D  function C         x000D        container   append   lt p gt C  Just some  lt span gt text lt  span gt  here lt  p gt     x000D    x000D   x000D  function D     x000D    var p   document createElement  p    x000D    p innerHTML    D  Just some  lt span gt text lt  span gt  here   x000D    container appendChild p   x000D    x000D   x000D  function E         x000D    var p   document createElement  p    x000D    var s   document createElement  span     x000D    s appendChild  document createTextNode  text       x000D    p appendChild  document createTextNode  E  Just some       x000D    p appendChild  s    x000D    p appendChild  document createTextNode   here      x000D    container appendChild p   x000D    x000D   x000D  function F         x000D    container insertAdjacentHTML  beforeend     lt p gt F  Just some  lt span gt text lt  span gt  here lt  p gt     x000D    x000D   x000D  A    x000D  B    x000D  C    x000D  D    x000D  E    x000D  F    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D  This snippet only for show code used in test  in jsperf com  - it not perform test itself   x000D   lt div id  container  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Quick Hack      lt script gt  document children 0  innerHTML   lt h1 gt QUICK HACK lt  h1 gt     lt  script gt      Use Cases   1  Save as  html file and run in chrome or firefox or edge   IE wont work   2  Use in http   js do  In Action  http   js do HeavyMetalCookies quick hack  Broken down with comments    lt script gt       The message  QUICK HACK       wrapped in a header  1 tag  var text     lt h1 gt QUICK HACK lt  h1 gt         It s a quick hack  so I don t     care where it goes on the document      just as long as I can see it      Since I am doing this quick hack in     an empty file or scratchpad       it should be visible  var child   document children 0        Set the html content of your child     to the message you want to see on screen  child innerHTML   text    lt  script gt    Reason Why I posted   JS do has two must haves    No autocomplete Vertical monitor friendly   But doesn t show console log messages  Came here looking for a quick solution  I just want to see the results of a few lines of scratchpad code  the other solutions are too much work

User · Answer

Is this acceptable   var child   document createElement  div    child innerHTML   str  child   child firstChild  document getElementById  test   appendChild child     jsFiddle   But  Neil s answer is a better solution

User · Answer

This can solve   document getElementById  list-input-email   insertAdjacentHTML  beforeend     lt div class    gt  lt input type  text  name    value    class      gt  lt  div gt

User · Answer

The right way is using insertAdjacentHTML  In Firefox earlier than 8  you can fall back to using Range createContextualFragment if your str contains no script tags   If your str contains script tags  you need to remove script elements from the fragment returned by createContextualFragment before inserting the fragment  Otherwise  the scripts will run   insertAdjacentHTML marks scripts unexecutable

User · Answer

InnerHTML clear all data like event for existing nodes  append child with firstChild adds only first child to innerHTML  For example if we have to append     lt p gt text1 lt  p gt  lt p gt text2 lt  p gt    only text1 will show up  What about this   adds special tag to innerHTML by append child and then edit outerHTML by deleting tag we ve created  Don t know how smart it is but it works for me or you might change outerHTML to innerHTML so it doesn t have to use function replace   x000D   x000D  function append element  str  x000D    x000D   x000D    var child   document createElement  someshittyuniquetag    x000D     x000D    child innerHTML   str  x000D   x000D    element appendChild child   x000D   x000D    child outerHTML   child outerHTML replace   lt    someshittyuniquetag gt         x000D   x000D     or Even child outerHTML   child innerHTML x000D   x000D   x000D     x000D    x000D   lt div id  testit  gt  x000D  This text is inside the div x000D   lt button onclick  append document getElementById  testit      lt button gt dadasasdas lt  button gt     gt To div lt  button gt  x000D   lt button onclick  append this   some text    gt to this lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Shortest - 18 chars  not confuse     mention by OP  with   more details here   test innerHTML str    x000D   x000D  var str     lt p gt Just some  lt span gt text lt  span gt  here lt  p gt    x000D   x000D  test innerHTML str x000D   lt div id  test  gt  lt  div gt  x000D   x000D   x000D

[javascript] Appending HTML string to the DOM

Examples related to javascript

Examples related to html

Examples related to dom

Examples related to browser