javascript - 从 DOMParser 获取所有 HTML 内容，不包括外部 body 标记

Question

我DOMParser在下面的代码中使用。

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>

当我运行它时，它会正确提供 HTML 内容，但问题是结果中也包含外部body标记，这使得内容具有blockdisplay。实际上，我需要保留inline显示，如前两节所示span。

我认为这是因为doc.body声明，所以我尝试将其更改为doc.body.firstChild（仅返回b元素）和doc.body.children（返回[Object HTMLCollection]），但它们都不起作用。

如何解决？

---

注意： <span><b>sample text</b> <i>sample text</i></span>是我网页上的动态内容。

标签： javascripthtmldomdynamichtml-parsing

Answer 1

尝试做

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>