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

【问题标题】：Get all HTML content from DOMParser, excluding the outer body tag从 DOMParser 获取所有 HTML 内容，不包括外部 body 标记
【发布时间】：2020-08-28 04:56:11
【问题描述】：

我在下面的代码中使用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 内容，但问题是 outer body 标签 也包含在结果中，这使得内容具有 @ 987654325@显示。实际上，我需要保留inline 显示，如前两个spans 所示。

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

如何解决？

注意：sample text sample text是我网页上的动态内容。

【问题讨论】：

标签： javascript html dom dynamic html-parsing

【解决方案1】：

希望我的理解是对的！您正在尝试显示与之前的 span 标签类似的内容。将字符串值分配给 innerHTML 内容可能会有所帮助，在这种情况下，无需使用 DOMParser。可能使用InnerHtml方法来保存内联风格。

const htmlContent = '<b>sample text</b>'
document.querySelector('.js').innerHTML = htmlContent;

如果仍然需要使用 DOMParser，那么你可能会这样做

document.querySelector('.js').innerHTML = doc.body.innerHTML

希望对你有帮助！

【讨论】：

设置 innerHTML 直接删除父元素可能拥有的所有以前的子元素，并且附加到 innerHTML 将删除对所有可能存在的所有以前的子元素的所有 javascript 引用。因此，只有在容器没有孩子或应该更换它们时才使用它。
非常抱歉，我忘了说我使用.append的方法是为了连续添加多个元素，所以我不能做innerHTML。无论如何，谢谢你。

【解决方案2】：

试试看

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>

【讨论】：