Search code examples
javascripthtmldomdynamichtml-parsing

Get all HTML content from DOMParser, excluding the outer body tag

I'm using DOMParser in the following code.

let doc = new DOMParser().parseFromString('<b>sample text</b> <i>sample text</i>', 'text/html');
document.querySelector('.js').append(doc.body);
<span><b>sample text</b> <i>sample text</i></span>
<span><b>sample text</b> <i>sample text</i></span>
<span class='js'></span>

When I run it, it gives the HTML content properly, but the issue is that the outer body tag is also included in the result, which makes the content to have block display. Actually, I need to preserve the inline display, as seen in previous two spans.

I thought it's because of doc.body statement, so I tried to change it to doc.body.firstChild (which returns only b element) and doc.body.children (which returns [Object HTMLCollection]), but none of them worked.

How to fix it?

Note: <span><b>sample text</b> <i>sample text</i></span> is a dynamic content on my webpage.

Solution

  • Try doing 

    document.querySelector('.js').append(...doc.body.children);


    let doc = new DOMParser().parseFromString('<b>sample text</b> <i>sample text</i>', 'text/html');
document.querySelector('.js').append(...doc.body.children);
    <span><b>sample text</b> <i>sample text</i></span>
<span><b>sample text</b> <i>sample text</i></span>
<span class='js'></span>