Search code examples
javascriptdomparser

There is a way to use DOMParser().parseFromString() to create just the element HTML without it creates too the tags <html>, <head> and <body>?


I "fetch" some content from html pages to append it to my content, there is no problem with the code, but I was wondering if there is a better way to use the DOMParse.parseFromString() since after I parse the html string it create a unnecessary basic html structure like <html>, <head> and <body> with my element inside, so after parse I have to use a querySelector() to get my element inside the page html that it creates. My question is there is any way to just create the element without this tags? my code is like this:

function insertFormAddAlunoHTML(){
  fetch('./myElementHTML.html')
  .then((res)=> res.text()) // => <div id='myElement'></div>
  .then((stringElement)=>{
   return new DOMParser().parseFromString(stringElement, 'text/html');
      /*  adds a unecessary html structure like:
      <html>
        <head></head>
        <body>
        <div id='myElement'></div>
        </body>
      </html> */
    })
  .then((html)=>{
//get the element inside the page
    let myElement = html.querySelector('#myElement');
  }).catch((err)=> console.log(err));
}


Solution

  • You can use

    return new DOMParser().parseFromString(stringElement, 'text/html').body.firstElementChild;