Get the string representation of a DOM node

Question

Javascript  I have the DOM representation of a node  element or document  and I m looking for the string representation of it  E g    var el   document createElement  p    el appendChild document createTextNode  Test       should yield   get string el       lt p gt Test lt  p gt      I have the strong feeling  that I m missing something trivially simple  but I just don t find a method that works in IE  FF  Safari and Opera  Therefore  outerHTML is no option

User · Answer

You can simply use outerHTML property over the element  It will return what you desire  Let s create a function named get string element   x000D   x000D  var el   document createElement  p    el appendChild document createTextNode  Test      function get string element     console log element outerHTML      get string el      your desired output x000D   x000D   x000D

User · Answer

I have wasted a lot of time figuring out what is wrong when I iterate through DOMElements with the code in the accepted answer  This is what worked for me  otherwise every second element disappears from the document    getGpxString  function node              clone   node cloneNode true             var tmp   document createElement  div              tmp appendChild clone             return tmp innerHTML

User · Answer

Under FF you can use the XMLSerializer object to serialize XML into a string   IE gives you an xml property of a node   So you can do the following   function xml2string node       if  typeof XMLSerializer       undefined           var serializer   new XMLSerializer          return serializer serializeToString node        else if  node xml          return node xml

User · Answer

I ve found that for my use-cases I don t always want the entire outerHTML  Many nodes just have too many children to show   Here s a function  minimally tested in Chrome           Stringifies a DOM node      param  Object  el - A DOM node      param  Number  truncate - How much to truncate innerHTML of element      returns  String  - A stringified node with attributes                        retained      function stringifyEl el  truncate        var truncateLen   truncate    50      var outerHTML   el outerHTML      var ret   outerHTML      ret   ret substring 0  truncateLen           If we ve truncated  add an elipsis      if  outerHTML length  gt  truncateLen          ret                     return ret      https   gist github com kahunacohen 467f5cc259b5d4a85eb201518dcb15ec

User · Answer

I dont think you need any complicated script for this  Just use   get string  el   gt el outerHTML

User · Answer

if using react   const html   ReactDOM findDOMNode document getElementsByTagName  html   0   outerHTML

User · Answer

Use Element outerHTML   var el   document createElement  p    el appendChild document createTextNode  Test      console log el outerHTML     It can also be used to write DOM elements  From Mozilla s documentation      The outerHTML attribute of the element DOM interface gets the serialized HTML fragment describing the element including its descendants  It can be set to replace the element with nodes parsed from the given string    https   developer mozilla org en-US docs Web API Element outerHTML

User · Answer

Use element outerHTML to get full representation of element  including outer tags and attributes

User · Answer

You can create a temporary parent node  and get the innerHTML content of it   var el   document createElement  p    el appendChild document createTextNode  Test      var tmp   document createElement  div    tmp appendChild el   console log tmp innerHTML       lt p gt Test lt  p gt    EDIT   Please see answer below about outerHTML  el outerHTML should be all that is needed

User · Answer

If your element has parent  element parentElement innerHTML

User · Answer

Try     new XMLSerializer   serializeToString element

User · Answer

What you re looking for is  outerHTML   but wee need a fallback coz it s not compatible with old browsers   var getString    function       var DIV   document createElement  div       if   outerHTML  in DIV      return function node          return node outerHTML            return function node        var div   DIV cloneNode        div appendChild node cloneNode true        return div innerHTML                  getString el       lt p gt Test lt  p gt     You ll find my jQuery plugin here  Get selected element  39 s outer HTML

[javascript] Get the string representation of a DOM node

Examples related to javascript

Examples related to string

Examples related to dom

Examples related to cross-browser

Examples related to element