How to convert a HTMLElement to a string

Question

I am going to create an XML element in JavaScript to exchange data with server side  I found I can do it with document createElement  But I do not know how to convert it to string  Is there any API in browser to make it easier  Or is there any JS library including this API   EDIT  I found that browser API XMLSerializer  it should be the right way to serialize to string

User · Answer

Suppose your element is entire  object HTMLDocument   You can convert it to a String this way   x000D   x000D  const htmlTemplate     lt  DOCTYPE html gt  lt html lang  en  gt  lt head gt  lt  head gt  lt body gt  lt  body gt  lt  html gt     const domparser   new DOMParser    const doc   domparser parseFromString htmlTemplate   text html        object HTMLDocument   const doctype     lt  DOCTYPE html gt    const html   doc documentElement outerHTML   console log doctype   html   x000D   x000D   x000D

User · Answer

This might not apply to everyone case  but when extracting from xml i had this problem  which i solved with this   function grab xml what   var return xml  null        ajax                   type   GET                   url  what                  success function xml  return xml  xml            async    false             return return xml       then get the xml   var sector xml grab xml  p sector xml    var tt   sector xml  find  pt      Then      I then made this function to extract xml line   when i need to read from an XML file  containing html tags       function extract xml line who       var tmp   document createElement  div        tmp appendChild who 0        var tmp   tmp innerHTML  html        return tmp       and now to conclude   var str of html  extract xml line tt find  intro       outputs the intro tag and whats inside it  helllo   lt b gt in bold lt  b gt

User · Answer

I was using Angular  and needed the same thing  and landed at this post    ViewChild  myHTML    static  false    html  ElementRef  this  html nativeElement

User · Answer

There s a tagName property  and a attributes property as well   var element   document getElementById  wtv    var openTag     lt   element tagName  for  var i   0  i  lt  element attributes length  i          var attrib   element attributes i       openTag        attrib name         attrib value    openTag      gt    alert openTag     See also How to iterate through all attributes in an HTML element   I did    To get the contents between the open and close tags you could probably use innerHTML if you don t want to iterate over all the child elements     alert element innerHTML         and then get the close tag again with tagName   var closeTag     lt    element tagName   gt    alert closeTag

User · Answer

You can get the  outer-html   by cloning the element  adding it to an empty  offstage  container  and reading the container s innerHTML   This example takes an optional second parameter   Call document getHTML element  true  to include the element s descendents   document getHTML  function who  deep       if  who     who tagName  return         var txt  ax  el  document createElement  div        el appendChild who cloneNode false        txt  el innerHTML      if deep           ax  txt indexOf   gt    1          txt  txt substring 0  ax  who innerHTML  txt substring ax             el  null      return txt

User · Answer

The most easy way to do is copy innerHTML of that element to tmp variable and make it empty  then append new element  and after that copy back tmp variable to it  Here is an example I used to add jquery script to top of head   var imported   document createElement  script    imported src    http   code jquery com jquery-1 7 1 js   var tmpHead   document head innerHTML  document head innerHTML       document head append imported   document head innerHTML    tmpHead    That simple

User · Answer

The element outerHTML property  note  supported by Firefox after version 11  returns the HTML of the entire element  Example  lt div id  quot new-element-1 quot  gt Hello world  lt  div gt    lt script type  quot text javascript quot  gt  lt  --  var element   document getElementById  quot new-element-1 quot    var elementHtml   element outerHTML      lt div id  quot new-element-1 quot  gt Hello world  lt  div gt   -- gt  lt  script gt   Similarly  you can use innerHTML to get the HTML contained within a given element  or innerText to get the text inside an element  sans HTML markup   See Also  outerHTML - Javascript Property Javascript Reference - Elements

[javascript] How to convert a HTMLElement to a string

Examples related to javascript

Examples related to html