当responseType = document时如何附加XHR HTML部分

如何解决当responseType = document时如何附加XHR HTML部分

我正在开发SPA，必须使用部分零件库进行更新。现在，根据即时通讯要求的文件扩展名设置xhr.responseType = document，在本例中为.html

我用来向浏览器打印响应的本地库使用innerHTML替换容器的视图，并使用insertAdjacentHTML追加到该视图。这不再起作用了，因为响应现在是HTML文档而不是纯文本，我打印到网页上的全部是：

[对象HTMLDocument]

现在响应也将自动包含“ html”，“ head”和“ body”标签

我如何处理将其附加到容器或替换容器内容的响应？

我尝试的第一件事是

outputDiv.innerHTML = new XMLSerializer().serializeToString(response);

但是将其从html文档转换为字符串，然后使用regex对其进行操作以删除html，head和body标签，然后使用innerHTML再次将其解析为HTML，实在是太客气了。

然后我尝试

<div id="fullWrapper">
    <p>Container full of content</p>
</div>


myXHR('modules/menu/views/menu.html',function(response) {
        const outputDIV = document.getElementById('fullWrapper');
        outputDiv.appendChild(response.documentElement);
    });

通过奇迹，它可以在chrome中使用，但是这种方法的问题在于它还附加了HTML HEAD和BODY的开始和结束标记以及部分内容，因此，menu.html的部分仅包含下一个代码

<p>Partial content</p>

成为

<html>
    <head></head>
<body>

<p>Partial content</p>

</body>
</html>

当我在上面的代码中附加它时，结果不是id所说的语义;）

<div id="fullWrapper">
    <html>
        <head></head>
    <body>

    <p>Partial content</p>

    </body>
    </html>
</div>

我也尝试过

<div id="fullWrapper">
    <p>Container full of content</p>
</div>


myXHR('modules/menu/views/menu.html',function(response) {
        const outputDIV = document.getElementById('fullWrapper');
        outputDiv.appendChild(response.documentElement.querySelector('element'));
    });

当部分函数只有一个孩子，但是我不一定知道哪个或多个元素会出现在部分函数中时，这是“很好的”方法，因此更可取。

编辑1

我还可以遍历每个子级，也可以将其附加到文档片段上，以免在部分具有很多节点时重新绘制。无论如何，这种方法也不适合。必须有更好的方法。

<div id="fullWrapper">
    <p>Container full of content</p>
</div>


myXHR('modules/menu/views/menu.html',function(response) {
        const outputDIV = document.getElementById('fullWrapper');
        let children = response.documentElement.querySelector('body').children);
for (let item of children) {
    outputDiv.appendChild(item);
}
    });

当responseType = document时如何附加XHR HTML部分

如何解决当responseType = document时如何附加XHR HTML部分

编辑1

相关推荐