How to get the HTML for a DOM element in javascript

Question

Imagine I have the following HTML    lt div gt  lt span gt  lt b gt This is in bold lt  b gt  lt  span gt  lt  div gt    I want to get the HTML for the div  including the div itself  Element innerHTML only returns    lt span gt     lt  span gt    Any ideas  Thanks

User · Answer

as outerHTML is IE only  use this function   function getOuterHtml node        var parent   node parentNode      var element   document createElement parent tagName       element appendChild node       var html   element innerHTML      parent appendChild node       return html      creates a bogus empty element of the type parent and uses innerHTML on it and then reattaches the element back into the normal dom

User · Answer

Use outerHTML   var el   document getElementById   foo     alert  el outerHTML

User · Answer

old question but for newcomers that come around     document querySelector  div   outerHTML

User · Answer

First  put on element that wraps the div in question   put an id attribute on the element and then use getElementById on it  once you ve got the lement  just do  e innerHTML  to retrieve the HTML    lt div gt  lt span gt  lt b gt This is in bold lt  b gt  lt  span gt  lt  div gt        lt div id  wrap  gt  lt div gt  lt span gt  lt b gt This is in bold lt  b gt  lt  span gt  lt  div gt  lt  div gt   and then   var e document getElementById  wrap    var content e innerHTML    Note that outerHTML is not cross-browser compatible

User · Answer

var el   document getElementById  foo    el parentNode innerHTML

User · Answer

define function outerHTML based on support for element outerHTML   var temp container   document createElement  div       empty div not added to DOM if  temp container outerHTML       var outerHTML   function el  return el outerHTML  el nodeValue     e g  textnodes do not have outerHTML     else      when  outerHTML is not supported     var outerHTML   function el         var clone   el cloneNode true         temp container appendChild clone         outerhtml   temp container innerHTML        temp container removeChild clone         return outerhtml

User · Answer

Expanding on jldupont s answer  you could create a wrapping element on the fly   var target   document getElementById  myElement    var wrap   document createElement  div    wrap appendChild target cloneNode true    alert wrap innerHTML     I am cloning the element to avoid having to remove and reinsert the element in the actual document  This might be expensive if the element you wish to print has a very large tree below it  though

User · Answer

var x       container   get 0  outerHTML

User · Answer

If you want a lighter footprint  but a longer script  get the elements innerHTML and only create and clone the empty parent-  function getHTML who lines       if  who     who tagName  return          var txt  ax  str  el  document createElement  div        el appendChild who cloneNode false        txt  el innerHTML      ax  txt indexOf   gt    1      str  txt substring 0  ax  who innerHTML  txt substring ax        el  null      return lines  str replace   gt    lt  g   gt  n lt     str        easier to read if elements are separated

User · Answer

You ll want something like this for it to be cross browser   function OuterHTML element        var container   document createElement  div        container appendChild element cloneNode true         return container innerHTML

[javascript] How to get the HTML for a DOM element in javascript

Examples related to javascript

Examples related to html

Examples related to dom