Creating a new DOM element from an HTML string using built-in DOM methods or Prototype

Question

I have an HTML string representing an element    lt li gt text lt  li gt    I d like to append it to an element in the DOM  a ul in my case   How can I do this with Prototype or with DOM methods    I know i could do this easily in jQuery  but unfortunately we re not using jQuery

User · Answer

This will work too       lt li gt    text  hello   appendTo   mylist      It feels more like a jquery way with the chained function calls

User · Answer

Here is working code for me  I wanted to convert  Text  string to HTML element  var diva   UWA createElement  div    diva innerHTML     lt a href  http   wwww example com  gt Text lt  a gt    var aelement   diva firstChild

User · Answer

Late but just as a note   It s possible to add a trivial element to target element as a container and remove it after using      Tested on chrome 23 0  firefox 18 0  ie 7-8-9 and opera 12 11    lt div id  div  gt  lt  div gt    lt script gt  window onload   function         var foo  targetElement   document getElementById  div       foo   document createElement  foo       foo innerHTML     lt a href     target   self  gt Text of A 1  lt  a gt                           lt a href     onclick  return   alert this innerHTML   gt Text of  lt b gt A 2 lt  b gt   lt  a gt                           lt hr size  1    gt          Append  foo  element to target element     targetElement appendChild foo          Add event     foo firstChild onclick   function     return   alert this target         while  foo firstChild               Also removes child nodes from  foo          targetElement insertBefore foo firstChild  foo               Remove  foo  element from target element     targetElement removeChild foo     lt  script gt

User · Answer

var msg    test  jQuery parseHTML msg

User · Answer

No need for any tweak  you got a native API   const toNodes   html   gt      new DOMParser   parseFromString html   text html   body childNodes 0

User · Answer

Fastest solution to render DOM from string   let render    relEl  tpl  parse   true    gt      if   relEl  return    const range   document createRange      range selectNode relEl     const child   range createContextualFragment tpl     return parse   relEl appendChild child     relEl  el        And here u can check performance for DOM manipulation React vs native JS  Now u can simply use   let element   render document body     lt div style  font-size 120  line-height 140   gt     lt p class  bold  gt New DOM lt  p gt   lt  div gt        And of course in near future u use references from memory cause var  element  is your new created DOM in your document   And remember  innerHTML   is very slow

User · Answer

You can create valid DOM nodes from a string using   document createRange   createContextualFragment    The following example adds a button element in the page taking the markup from a string    x000D   x000D  let html     lt button type  button  gt Click Me  lt  button gt    x000D  let fragmentFromString   function  strHTML    x000D    return document createRange   createContextualFragment strHTML   x000D    x000D  let fragment   fragmentFromString html   x000D  document body appendChild fragment   x000D   x000D   x000D

User · Answer

To enhance furthermore the useful  toDOM   snippet that we can find in different places  we can now safely use backticks  template literals     So we can have single and double quotes in the foo html declaration   This behave like heredocs for those familiar with the term   This can be enhanced furthermore with variables  to make complex templating      Template literals are enclosed by the back-tick      grave accent    character instead of double or single quotes  Template literals can   contain placeholders  These are indicated by the dollar sign and curly   braces    expression    The expressions in the placeholders and the   text between them get passed to a function  The default function just   concatenates the parts into a single string  If there is an expression   preceding the template literal  tag here   this is called a  tagged   template   In that case  the tag expression  usually a function  gets   called with the processed template literal  which you can then   manipulate before outputting  To escape a back-tick in a template   literal  put a backslash   before the back-tick     x000D   x000D  String prototype toDOM function    x000D    var d document i x000D        a d createElement  div   x000D        b d createDocumentFragment   x000D    a innerHTML   this x000D    while i a firstChild b appendChild i  x000D    return b x000D    x000D   x000D     Using template litterals x000D  var a   10  b   5 x000D  var foo   x000D   lt img  x000D    onclick  alert  The future start today        x000D    src    placekitten com 100 100  gt  x000D  foo  a   b  x000D     lt i gt bar lt  i gt  x000D       lt hr gt   toDOM    x000D  document body appendChild foo   x000D  img  cursor  crosshair  x000D   x000D   x000D    So  why not use directly  innerHTML     By doing so  the whole DOM is being recalculated by the browser  it s much slower   https   caniuse com template-literals

User · Answer

Newer DOM implementations have range createContextualFragment  which does what you want in a framework-independent way   It s widely supported  To be sure though  check its compatibility down in the same MDN link  as it will be changing  As of May 2017 this is it   Feature         Chrome   Edge   Firefox Gecko   Internet Explorer   Opera   Safari Basic support    Yes      Yes    Yes            11                  15 0    9 1 2

User · Answer

I am using this method  Works in IE9    although it will not parse  lt td gt  or some other invalid direct childs of body   function stringToEl string        var parser   new DOMParser            content    text html           DOM   parser parseFromString string  content           return element     return DOM body childNodes 0      stringToEl   lt li gt text lt  li gt       OUTPUT   lt li gt text lt  li gt

User · Answer

This will work too       lt li gt    text  hello   appendTo   mylist      It feels more like a jquery way with the chained function calls

User · Answer

HTML5  amp  ES6   lt template gt   Demo   x000D   x000D   use strict   x000D   x000D      x000D     x000D      author xgqfrms x000D      license MIT x000D      copyright xgqfrms x000D      description HTML5 Template x000D      augments x000D      example x000D     x000D      x000D   x000D     x000D   x000D   lt template gt  x000D       lt h2 gt Flower lt  h2 gt  x000D       lt img src  https   www w3schools com tags img white flower jpg  gt  x000D   lt  template gt  x000D   x000D   x000D   lt template gt  x000D       lt div class  myClass  gt I like   lt  div gt  x000D   lt  template gt  x000D   x000D     x000D   x000D  const showContent        gt    x000D         let temp   document getElementsByTagName  template   0   x000D      let temp   document querySelector   data-tempalte  tempalte-img      x000D          clone   temp content cloneNode true   x000D      document body appendChild clone   x000D     x000D   x000D  const templateGenerator    datas       debug   false    gt    x000D      let result       x000D         let temp   document getElementsByTagName  template   1   x000D      let temp   document querySelector   data-tempalte  tempalte-links      x000D          item   temp content querySelector  div    x000D      for  let i   0  i  lt  datas length  i      x000D          let a   document importNode item  true   x000D          a textContent    datas i   x000D          document body appendChild a   x000D        x000D      return result  x000D     x000D   x000D  const arr     Audi    BMW    Ford    Honda    Jaguar    Nissan    x000D   x000D  if  document createElement  template   content    x000D      console log  YES  The browser supports the template element    x000D      templateGenerator arr   x000D      setTimeout      gt    x000D          showContent    x000D         0   x000D    else   x000D      console error  No  The browser does not support the template element    x000D    x000D   charset  UTf-8   x000D   x000D     test css    x000D   x000D   root   x000D      --cololr   000  x000D      --default-cololr   fff  x000D      --new-cololr   0f0  x000D    x000D   x000D   data-class  links     x000D      color  white  x000D      background-color  DodgerBlue  x000D      padding  20px  x000D      text-align  center  x000D      margin  10px  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  zh-Hans  gt  x000D   x000D   lt head gt  x000D       lt meta charset  UTF-8  gt  x000D       lt meta name  viewport  content  width device-width  initial-scale 1 0  gt  x000D       lt meta http-equiv  X-UA-Compatible  content  ie edge  gt  x000D       lt title gt Template Test lt  title gt  x000D       lt  -- if lt IE 9  gt  x000D           lt script src  https   cdnjs cloudflare com ajax libs html5shiv 3 7 3 html5shiv js  gt  lt  script gt  x000D       lt   endif -- gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D       lt section gt  x000D           lt h1 gt Template Test lt  h1 gt  x000D       lt  section gt  x000D       lt template data-tempalte  tempalte-img  gt  x000D           lt h3 gt Flower Image lt  h3 gt  x000D           lt img src  https   www w3schools com tags img white flower jpg  gt  x000D       lt  template gt  x000D       lt template data-tempalte  tempalte-links  gt  x000D           lt h3 gt links lt  h3 gt  x000D           lt div data-class  links  gt I like   lt  div gt  x000D       lt  template gt  x000D       lt  -- js -- gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Note  most current browsers support HTML  lt template gt  elements  which provide a more reliable way of turning creating elements from strings  See Mark Amery s answer below for details   For older browsers  and node jsdom   which doesn t yet support  lt template gt  elements at the time of writing   use the following method  It s the same thing the libraries use to do to get DOM elements from an HTML string  with some extra work for IE to work around bugs with its implementation of innerHTML    function createElementFromHTML htmlString      var div   document createElement  div      div innerHTML   htmlString trim          Change this to div childNodes to support multiple top-level nodes   return div firstChild       Note that unlike HTML templates this won t work for some elements that cannot legally be children of a  lt div gt   such as  lt td gt s    If you re already using a library  I would recommend you stick to the library-approved method of creating elements from HTML strings    Prototype has this feature built-into its update   method   jQuery has it implemented in its jQuery html  and jQuery parseHTML methods

User · Answer

To enhance furthermore the useful  toDOM   snippet that we can find in different places  we can now safely use backticks  template literals     So we can have single and double quotes in the foo html declaration   This behave like heredocs for those familiar with the term   This can be enhanced furthermore with variables  to make complex templating      Template literals are enclosed by the back-tick      grave accent    character instead of double or single quotes  Template literals can   contain placeholders  These are indicated by the dollar sign and curly   braces    expression    The expressions in the placeholders and the   text between them get passed to a function  The default function just   concatenates the parts into a single string  If there is an expression   preceding the template literal  tag here   this is called a  tagged   template   In that case  the tag expression  usually a function  gets   called with the processed template literal  which you can then   manipulate before outputting  To escape a back-tick in a template   literal  put a backslash   before the back-tick     x000D   x000D  String prototype toDOM function    x000D    var d document i x000D        a d createElement  div   x000D        b d createDocumentFragment   x000D    a innerHTML   this x000D    while i a firstChild b appendChild i  x000D    return b x000D    x000D   x000D     Using template litterals x000D  var a   10  b   5 x000D  var foo   x000D   lt img  x000D    onclick  alert  The future start today        x000D    src    placekitten com 100 100  gt  x000D  foo  a   b  x000D     lt i gt bar lt  i gt  x000D       lt hr gt   toDOM    x000D  document body appendChild foo   x000D  img  cursor  crosshair  x000D   x000D   x000D    So  why not use directly  innerHTML     By doing so  the whole DOM is being recalculated by the browser  it s much slower   https   caniuse com template-literals

User · Answer

HTML5  amp  ES6   lt template gt   Demo   x000D   x000D   use strict   x000D   x000D      x000D     x000D      author xgqfrms x000D      license MIT x000D      copyright xgqfrms x000D      description HTML5 Template x000D      augments x000D      example x000D     x000D      x000D   x000D     x000D   x000D   lt template gt  x000D       lt h2 gt Flower lt  h2 gt  x000D       lt img src  https   www w3schools com tags img white flower jpg  gt  x000D   lt  template gt  x000D   x000D   x000D   lt template gt  x000D       lt div class  myClass  gt I like   lt  div gt  x000D   lt  template gt  x000D   x000D     x000D   x000D  const showContent        gt    x000D         let temp   document getElementsByTagName  template   0   x000D      let temp   document querySelector   data-tempalte  tempalte-img      x000D          clone   temp content cloneNode true   x000D      document body appendChild clone   x000D     x000D   x000D  const templateGenerator    datas       debug   false    gt    x000D      let result       x000D         let temp   document getElementsByTagName  template   1   x000D      let temp   document querySelector   data-tempalte  tempalte-links      x000D          item   temp content querySelector  div    x000D      for  let i   0  i  lt  datas length  i      x000D          let a   document importNode item  true   x000D          a textContent    datas i   x000D          document body appendChild a   x000D        x000D      return result  x000D     x000D   x000D  const arr     Audi    BMW    Ford    Honda    Jaguar    Nissan    x000D   x000D  if  document createElement  template   content    x000D      console log  YES  The browser supports the template element    x000D      templateGenerator arr   x000D      setTimeout      gt    x000D          showContent    x000D         0   x000D    else   x000D      console error  No  The browser does not support the template element    x000D    x000D   charset  UTf-8   x000D   x000D     test css    x000D   x000D   root   x000D      --cololr   000  x000D      --default-cololr   fff  x000D      --new-cololr   0f0  x000D    x000D   x000D   data-class  links     x000D      color  white  x000D      background-color  DodgerBlue  x000D      padding  20px  x000D      text-align  center  x000D      margin  10px  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  zh-Hans  gt  x000D   x000D   lt head gt  x000D       lt meta charset  UTF-8  gt  x000D       lt meta name  viewport  content  width device-width  initial-scale 1 0  gt  x000D       lt meta http-equiv  X-UA-Compatible  content  ie edge  gt  x000D       lt title gt Template Test lt  title gt  x000D       lt  -- if lt IE 9  gt  x000D           lt script src  https   cdnjs cloudflare com ajax libs html5shiv 3 7 3 html5shiv js  gt  lt  script gt  x000D       lt   endif -- gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D       lt section gt  x000D           lt h1 gt Template Test lt  h1 gt  x000D       lt  section gt  x000D       lt template data-tempalte  tempalte-img  gt  x000D           lt h3 gt Flower Image lt  h3 gt  x000D           lt img src  https   www w3schools com tags img white flower jpg  gt  x000D       lt  template gt  x000D       lt template data-tempalte  tempalte-links  gt  x000D           lt h3 gt links lt  h3 gt  x000D           lt div data-class  links  gt I like   lt  div gt  x000D       lt  template gt  x000D       lt  -- js -- gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

var jtag    j li   child  text         Represents   lt li gt text lt  li gt  var htmlContent      mylist   html       mylist   html htmlContent   jtag html       Use jnerator

User · Answer

For the heck of it I thought I d share this over complicated but yet simple approach I came up with    Maybe someone will find something useful     Creates a new element - By Jamin Szczesny   function  new args       ele   document createElement args node       delete args node      for x in args            if typeof ele x     string                ele x    args x            else              ele setAttribute x  args x                        return ele       You would  simply  use it like this       body   0  appendChild  new       node  div       id  my-div       style  position absolute  left 100px  top 100px               width 100px  height 100px  border 2px solid red               cursor pointer  background-color HoneyDew       innerHTML  My newly created div element        value  for example only       onclick  alert  yay

User · Answer

Here s my code  and it works   function parseTableHtml s       s is string     var div   document createElement  table        div innerHTML   s       var tr   div getElementsByTagName  tr

User · Answer

Here s my code  and it works   function parseTableHtml s       s is string     var div   document createElement  table        div innerHTML   s       var tr   div getElementsByTagName  tr

User · Answer

Note  most current browsers support HTML  lt template gt  elements  which provide a more reliable way of turning creating elements from strings  See Mark Amery s answer below for details   For older browsers  and node jsdom   which doesn t yet support  lt template gt  elements at the time of writing   use the following method  It s the same thing the libraries use to do to get DOM elements from an HTML string  with some extra work for IE to work around bugs with its implementation of innerHTML    function createElementFromHTML htmlString      var div   document createElement  div      div innerHTML   htmlString trim          Change this to div childNodes to support multiple top-level nodes   return div firstChild       Note that unlike HTML templates this won t work for some elements that cannot legally be children of a  lt div gt   such as  lt td gt s    If you re already using a library  I would recommend you stick to the library-approved method of creating elements from HTML strings    Prototype has this feature built-into its update   method   jQuery has it implemented in its jQuery html  and jQuery parseHTML methods

User · Answer

function domify  str      var el   document createElement  div      el innerHTML   str     var frag   document createDocumentFragment      return frag appendChild el removeChild el firstChild       var str     lt div class  foo  gt foo lt  div gt    domify str

User · Answer

HTML 5 introduced the  lt template gt  element which can be used for this purpose  as now described in the WhatWG spec and MDN docs    A  lt template gt  element is used to declare fragments of HTML that can be utilized in scripts  The element is represented in the DOM as a HTMLTemplateElement which has a  content property of DocumentFragment type  to provide access to the template s contents  This means that you can convert an HTML string to DOM elements by setting the innerHTML of a  lt template gt  element  then reaching into the template s  content property   Examples           param  String  HTML representing a single element     return  Element      function htmlToElement html        var template   document createElement  template        html   html trim       Never return a text node of whitespace as the result     template innerHTML   html      return template content firstChild     var td   htmlToElement   lt td gt foo lt  td gt         div   htmlToElement   lt div gt  lt span gt nested lt  span gt   lt span gt stuff lt  span gt  lt  div gt              param  String  HTML representing any number of sibling elements     return  NodeList       function htmlToElements html        var template   document createElement  template        template innerHTML   html      return template content childNodes     var rows   htmlToElements   lt tr gt  lt td gt foo lt  td gt  lt  tr gt  lt tr gt  lt td gt bar lt  td gt  lt  tr gt       Note that similar approaches that use a different container element such as a div don t quite work  HTML has restrictions on what element types are allowed to exist inside which other element types  for instance  you can t put a td as a direct child of a div  This causes these elements to vanish if you try to set the innerHTML of a div to contain them  Since  lt template gt s have no such restrictions on their content  this shortcoming doesn t apply when using a template   However  template is not supported in some old browsers  As of January 2018  Can I use    estimates 90  of users globally are using a browser that supports templates  In particular  no version of Internet Explorer supports them  Microsoft did not implement template support until the release of Edge   If you re lucky enough to be writing code that s only targeted at users on modern browsers  go ahead and use them right now  Otherwise  you may have to wait a while for users to catch up

User · Answer

var jtag    j li   child  text         Represents   lt li gt text lt  li gt  var htmlContent      mylist   html       mylist   html htmlContent   jtag html       Use jnerator

User · Answer

Note  most current browsers support HTML  lt template gt  elements  which provide a more reliable way of turning creating elements from strings  See Mark Amery s answer below for details   For older browsers  and node jsdom   which doesn t yet support  lt template gt  elements at the time of writing   use the following method  It s the same thing the libraries use to do to get DOM elements from an HTML string  with some extra work for IE to work around bugs with its implementation of innerHTML    function createElementFromHTML htmlString      var div   document createElement  div      div innerHTML   htmlString trim          Change this to div childNodes to support multiple top-level nodes   return div firstChild       Note that unlike HTML templates this won t work for some elements that cannot legally be children of a  lt div gt   such as  lt td gt s    If you re already using a library  I would recommend you stick to the library-approved method of creating elements from HTML strings    Prototype has this feature built-into its update   method   jQuery has it implemented in its jQuery html  and jQuery parseHTML methods

User · Answer

Heres a simple way to do it   String prototype toDOM function      var d document       i       a d createElement  div         b d createDocumentFragment      a innerHTML this    while i a firstChild b appendChild i     return b      var foo   lt img src    placekitten com 100 100  gt foo lt i gt bar lt  i gt   toDOM    document body appendChild foo

User · Answer

You can use the following function to convert the text  HTML  to the element   x000D   x000D  function htmlToElement html  x000D    x000D    var element   document createElement  div    x000D    element innerHTML   html  x000D    return element   x000D    x000D  var html   lt li gt text and html lt  li gt    x000D  var e htmlToElement html   x000D   x000D   x000D

User · Answer

function domify  str      var el   document createElement  div      el innerHTML   str     var frag   document createDocumentFragment      return frag appendChild el removeChild el firstChild       var str     lt div class  foo  gt foo lt  div gt    domify str

User · Answer

Use insertAdjacentHTML    It works with all current browsers  even with IE11    x000D   x000D  var mylist   document getElementById  mylist    x000D  mylist insertAdjacentHTML  beforeend     lt li gt third lt  li gt     x000D   lt ul id  mylist  gt  x000D    lt li gt first lt  li gt  x000D    lt li gt second lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

Use insertAdjacentHTML    It works with all current browsers  even with IE11    x000D   x000D  var mylist   document getElementById  mylist    x000D  mylist insertAdjacentHTML  beforeend     lt li gt third lt  li gt     x000D   lt ul id  mylist  gt  x000D    lt li gt first lt  li gt  x000D    lt li gt second lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

Why don t do with native js      var s  quot  lt span class  text-muted  style  font-size  75em  position absolute  bottom 3px  left 30px  gt From  lt strong gt Dan s Tools lt  strong gt  lt  span gt  quot      var e document createElement  div       var r document createRange        r selectNodeContents e      var f r createContextualFragment s       e appendChild f       e   e firstElementChild

User · Answer

var msg    test  jQuery parseHTML msg

User · Answer

I am using this method  Works in IE9    although it will not parse  lt td gt  or some other invalid direct childs of body   function stringToEl string        var parser   new DOMParser            content    text html           DOM   parser parseFromString string  content           return element     return DOM body childNodes 0      stringToEl   lt li gt text lt  li gt       OUTPUT   lt li gt text lt  li gt

User · Answer

You can create valid DOM nodes from a string using   document createRange   createContextualFragment    The following example adds a button element in the page taking the markup from a string    x000D   x000D  let html     lt button type  button  gt Click Me  lt  button gt    x000D  let fragmentFromString   function  strHTML    x000D    return document createRange   createContextualFragment strHTML   x000D    x000D  let fragment   fragmentFromString html   x000D  document body appendChild fragment   x000D   x000D   x000D

User · Answer

Why don t do with native js      var s  quot  lt span class  text-muted  style  font-size  75em  position absolute  bottom 3px  left 30px  gt From  lt strong gt Dan s Tools lt  strong gt  lt  span gt  quot      var e document createElement  div       var r document createRange        r selectNodeContents e      var f r createContextualFragment s       e appendChild f       e   e firstElementChild

User · Answer

Here is working code for me  I wanted to convert  Text  string to HTML element  var diva   UWA createElement  div    diva innerHTML     lt a href  http   wwww example com  gt Text lt  a gt    var aelement   diva firstChild

User · Answer

With Prototype  you can also do   HTML    lt ul id  mylist  gt  lt  ul gt    JS      mylist   insert   lt li gt text lt  li gt

User · Answer

Heres a simple way to do it   String prototype toDOM function      var d document       i       a d createElement  div         b d createDocumentFragment      a innerHTML this    while i a firstChild b appendChild i     return b      var foo   lt img src    placekitten com 100 100  gt foo lt i gt bar lt  i gt   toDOM    document body appendChild foo

User · Answer

Answer  Create a Template Set the Template s innerHTML to your string  trim   Create an Array of Template s children Return children  child  or     x000D   x000D  function toElement s    c t document createElement  template   l  length    t innerHTML s trim   c     t content childNodes  return c l  gt 1 c c 0           console log toElement     console log toElement       console log toElement           console log toElement   lt td gt With td lt  td gt      console log toElement   lt tr gt  lt td gt With t lt  td gt  lt  tr gt      console log toElement   lt tr gt  lt td gt foo lt  td gt  lt  tr gt  lt tr gt  lt td gt bar lt  td gt  lt  tr gt      console log toElement   lt div gt  lt span gt nested lt  span gt   lt span gt stuff lt  span gt  lt  div gt      x000D   x000D   x000D

User · Answer

Note  most current browsers support HTML  lt template gt  elements  which provide a more reliable way of turning creating elements from strings  See Mark Amery s answer below for details   For older browsers  and node jsdom   which doesn t yet support  lt template gt  elements at the time of writing   use the following method  It s the same thing the libraries use to do to get DOM elements from an HTML string  with some extra work for IE to work around bugs with its implementation of innerHTML    function createElementFromHTML htmlString      var div   document createElement  div      div innerHTML   htmlString trim          Change this to div childNodes to support multiple top-level nodes   return div firstChild       Note that unlike HTML templates this won t work for some elements that cannot legally be children of a  lt div gt   such as  lt td gt s    If you re already using a library  I would recommend you stick to the library-approved method of creating elements from HTML strings    Prototype has this feature built-into its update   method   jQuery has it implemented in its jQuery html  and jQuery parseHTML methods

User · Answer

I added a Document prototype that creates an element from string   Document prototype createElementFromString   function  str        const element   new DOMParser   parseFromString str   text html        const child   element documentElement querySelector  body   firstChild      return child

User · Answer

With Prototype  you can also do   HTML    lt ul id  mylist  gt  lt  ul gt    JS      mylist   insert   lt li gt text lt  li gt

User · Answer

I added a Document prototype that creates an element from string   Document prototype createElementFromString   function  str        const element   new DOMParser   parseFromString str   text html        const child   element documentElement querySelector  body   firstChild      return child

User · Answer

For the heck of it I thought I d share this over complicated but yet simple approach I came up with    Maybe someone will find something useful     Creates a new element - By Jamin Szczesny   function  new args       ele   document createElement args node       delete args node      for x in args            if typeof ele x     string                ele x    args x            else              ele setAttribute x  args x                        return ele       You would  simply  use it like this       body   0  appendChild  new       node  div       id  my-div       style  position absolute  left 100px  top 100px               width 100px  height 100px  border 2px solid red               cursor pointer  background-color HoneyDew       innerHTML  My newly created div element        value  for example only       onclick  alert  yay

User · Answer

Fastest solution to render DOM from string   let render    relEl  tpl  parse   true    gt      if   relEl  return    const range   document createRange      range selectNode relEl     const child   range createContextualFragment tpl     return parse   relEl appendChild child     relEl  el        And here u can check performance for DOM manipulation React vs native JS  Now u can simply use   let element   render document body     lt div style  font-size 120  line-height 140   gt     lt p class  bold  gt New DOM lt  p gt   lt  div gt        And of course in near future u use references from memory cause var  element  is your new created DOM in your document   And remember  innerHTML   is very slow

User · Answer

HTML 5 introduced the  lt template gt  element which can be used for this purpose  as now described in the WhatWG spec and MDN docs    A  lt template gt  element is used to declare fragments of HTML that can be utilized in scripts  The element is represented in the DOM as a HTMLTemplateElement which has a  content property of DocumentFragment type  to provide access to the template s contents  This means that you can convert an HTML string to DOM elements by setting the innerHTML of a  lt template gt  element  then reaching into the template s  content property   Examples           param  String  HTML representing a single element     return  Element      function htmlToElement html        var template   document createElement  template        html   html trim       Never return a text node of whitespace as the result     template innerHTML   html      return template content firstChild     var td   htmlToElement   lt td gt foo lt  td gt         div   htmlToElement   lt div gt  lt span gt nested lt  span gt   lt span gt stuff lt  span gt  lt  div gt              param  String  HTML representing any number of sibling elements     return  NodeList       function htmlToElements html        var template   document createElement  template        template innerHTML   html      return template content childNodes     var rows   htmlToElements   lt tr gt  lt td gt foo lt  td gt  lt  tr gt  lt tr gt  lt td gt bar lt  td gt  lt  tr gt       Note that similar approaches that use a different container element such as a div don t quite work  HTML has restrictions on what element types are allowed to exist inside which other element types  for instance  you can t put a td as a direct child of a div  This causes these elements to vanish if you try to set the innerHTML of a div to contain them  Since  lt template gt s have no such restrictions on their content  this shortcoming doesn t apply when using a template   However  template is not supported in some old browsers  As of January 2018  Can I use    estimates 90  of users globally are using a browser that supports templates  In particular  no version of Internet Explorer supports them  Microsoft did not implement template support until the release of Edge   If you re lucky enough to be writing code that s only targeted at users on modern browsers  go ahead and use them right now  Otherwise  you may have to wait a while for users to catch up

User · Answer

No need for any tweak  you got a native API   const toNodes   html   gt      new DOMParser   parseFromString html   text html   body childNodes 0

User · Answer

For certain html fragments like  lt td gt test lt  td gt   div innerHTML  DOMParser parseFromString and range createContextualFragment  without the right context  solutions mentioned in other answers here  won t create the  lt td gt  element   jQuery parseHTML   handles them properly  I extracted jQuery 2 s parseHTML function into an independent function that can be used in non-jquery codebases    If you are only supporting Edge 13   it is simpler to just use the HTML5 template tag   function parseHTML html        var t   document createElement  template        t innerHTML   html      return t content cloneNode true      var documentFragment   parseHTML   lt td gt Test lt  td gt

User · Answer

Answer  Create a Template Set the Template s innerHTML to your string  trim   Create an Array of Template s children Return children  child  or     x000D   x000D  function toElement s    c t document createElement  template   l  length    t innerHTML s trim   c     t content childNodes  return c l  gt 1 c c 0           console log toElement     console log toElement       console log toElement           console log toElement   lt td gt With td lt  td gt      console log toElement   lt tr gt  lt td gt With t lt  td gt  lt  tr gt      console log toElement   lt tr gt  lt td gt foo lt  td gt  lt  tr gt  lt tr gt  lt td gt bar lt  td gt  lt  tr gt      console log toElement   lt div gt  lt span gt nested lt  span gt   lt span gt stuff lt  span gt  lt  div gt      x000D   x000D   x000D

User · Answer

Newer DOM implementations have range createContextualFragment  which does what you want in a framework-independent way   It s widely supported  To be sure though  check its compatibility down in the same MDN link  as it will be changing  As of May 2017 this is it   Feature         Chrome   Edge   Firefox Gecko   Internet Explorer   Opera   Safari Basic support    Yes      Yes    Yes            11                  15 0    9 1 2

User · Answer

For certain html fragments like  lt td gt test lt  td gt   div innerHTML  DOMParser parseFromString and range createContextualFragment  without the right context  solutions mentioned in other answers here  won t create the  lt td gt  element   jQuery parseHTML   handles them properly  I extracted jQuery 2 s parseHTML function into an independent function that can be used in non-jquery codebases    If you are only supporting Edge 13   it is simpler to just use the HTML5 template tag   function parseHTML html        var t   document createElement  template        t innerHTML   html      return t content cloneNode true      var documentFragment   parseHTML   lt td gt Test lt  td gt

User · Answer

You can use the following function to convert the text  HTML  to the element   x000D   x000D  function htmlToElement html  x000D    x000D    var element   document createElement  div    x000D    element innerHTML   html  x000D    return element   x000D    x000D  var html   lt li gt text and html lt  li gt    x000D  var e htmlToElement html   x000D   x000D   x000D

User · Answer

Late but just as a note   It s possible to add a trivial element to target element as a container and remove it after using      Tested on chrome 23 0  firefox 18 0  ie 7-8-9 and opera 12 11    lt div id  div  gt  lt  div gt    lt script gt  window onload   function         var foo  targetElement   document getElementById  div       foo   document createElement  foo       foo innerHTML     lt a href     target   self  gt Text of A 1  lt  a gt                           lt a href     onclick  return   alert this innerHTML   gt Text of  lt b gt A 2 lt  b gt   lt  a gt                           lt hr size  1    gt          Append  foo  element to target element     targetElement appendChild foo          Add event     foo firstChild onclick   function     return   alert this target         while  foo firstChild               Also removes child nodes from  foo          targetElement insertBefore foo firstChild  foo               Remove  foo  element from target element     targetElement removeChild foo     lt  script gt

[javascript] Creating a new DOM element from an HTML string using built-in DOM methods or Prototype

Examples related to javascript

Examples related to dom

Examples related to prototypejs