Converting HTML string into DOM elements

Question

Is there a way to convert HTML like    lt div gt   lt a href     gt  lt  a gt   lt span gt  lt  span gt   lt  div gt    or any other HTML string into DOM element   So that I could use appendChild     I know that I can do  innerHTML and  innerText  but that is not what I want -- I literally want to be capable of converting a dynamic HTML string into a DOM element so that I could pass it in a  appendChild     Update  There seems to be confusion  I have the HTML contents in a string  as a value of a variable in JavaScript  There is no HTML content in the document

User · Answer

You can do it like this   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

Just give an id to the element and process it normally eg    lt div id  dv  gt   lt a href     gt  lt  a gt   lt span gt  lt  span gt   lt  div gt    Now you can do like   var div   document getElementById  dv    div appendChild            Or with jQuery       dv   get 0  appendChild

User · Answer

You can use a DOMParser  like so    x000D   x000D  var xmlString     lt div id  foo  gt  lt a href     gt Link lt  a gt  lt span gt  lt  span gt  lt  div gt    x000D  var doc   new DOMParser   parseFromString xmlString   text xml    x000D  console log doc firstChild innerHTML        gt   lt a href     gt Link    x000D  console log doc firstChild firstChild innerHTML        gt  Link x000D   x000D   x000D

User · Answer

Here is a little code that is useful   var uiHelper   function       var htmls        var getHTML   function  url                         lt summary gt Returns HTML in a string format lt  summary gt                       lt param name  url  type  string  gt The url to the file with the HTML lt  param gt       if   htmls url             var xmlhttp   new XMLHttpRequest        xmlhttp open  GET   url  false       xmlhttp send        htmls url    xmlhttp responseText               return htmls url                   return               getHTML  getHTML                   --Convert the HTML string into a DOM Element  String prototype toDomElement   function               var wrapper   document createElement  div            wrapper innerHTML   this          var df  document createDocumentFragment            return df addChilds wrapper children        --prototype helper  HTMLElement prototype addChilds   function  newChilds                 lt summary gt Add an array of child elements lt  summary gt               lt param name  newChilds  type  Array  gt Array of HTMLElements to add to this HTMLElement lt  param gt               lt returns type  this    gt          for  var i   0  i  lt  newChilds length  i    1    this appendChild newChilds i               return this       --Usage   thatHTML   uiHelper getHTML   Scripts elevation ui add html add txt   toDomElement

User · Answer

Okay  I realized the answer myself  after I had to think about other people s answers   P  var htmlContent          a response via AJAX containing HTML var e   document createElement  div    e setAttribute  style    display  none     e innerHTML   htmlContent  document body appendChild e   var htmlConvertedIntoDom   e lastChild childNodes     the HTML converted into a DOM element     now let s remove the document body removeChild e

User · Answer

You typically create a temporary parent element to which you can write the innerHTML  then extract the contents   var wrapper  document createElement  div    wrapper innerHTML    lt div gt  lt a href     gt  lt  a gt  lt span gt  lt  span gt  lt  div gt    var div  wrapper firstChild    If the element whose outer-HTML you ve got is a simple  lt div gt  as here  this is easy  If it might be something else that can t go just anywhere  you might have more problems  For example if it were a  lt li gt   you d have to have the parent wrapper be a  lt ul gt    But IE can t write innerHTML on elements like  lt tr gt  so if you had a  lt td gt  you d have to wrap the whole HTML string in  lt table gt  lt tbody gt  lt tr gt     lt  tr gt  lt  tbody gt  lt  table gt   write that to innerHTML and extricate the actual  lt td gt  you wanted from a couple of levels down

User · Answer

Check out John Resig s pure JavaScript HTML parser   EDIT  if you want the browser to parse the HTML for you  innerHTML is exactly what you want  From this SO question   var tempDiv   document createElement  div    tempDiv innerHTML   htmlString

User · Answer

Why not use insertAdjacentHTML  for example       lt div id  one  gt one lt  div gt   var d1   document getElementById  one     d1 insertAdjacentHTML  afterend     lt div id  two  gt two lt  div gt         At this point  the new structure is      lt div id  one  gt one lt  div gt  lt div id  two  gt two lt  div gt here

[javascript] Converting HTML string into DOM elements?

Examples related to javascript

Examples related to html

Examples related to dom