Question

是否可以将html文件附加到已经加载了单独的html文件的Jsdom中？

Answer 1

是的，你可以这样做。最简单的方法是：

使用jsdom创建您的初始DOM。
使用fs将第二个HTML文件读入字符串。
将第二个HTML文件的内容附加到jsdom返回的原始DOM。

安装

npm install jsdom --save-dev
npm install fs --save-dev

示例代码：

var jsdom = require('jsdom').JSDOM;
var fs = require('fs');
var document = (new jsdom('<!DOCTYPE html><html><head></head><body></body></html>')).window.document;
var secondHtml = fs.readFileSync('HelloWorld.html').toString();
document.body.innerHTML = secondHtml;

请注意，您的第二个HTML应排除<html>，<head>和<body>标记。否则，您在现有<body>标记内插入<body>标记时会遇到问题。

Answer 2

我认为这会有所帮助。

require('jsdom-global')();
var fs = require('fs');
document = window.document;
var dashboard = 
fs.readFileSync('yourHtmlFile').toString();
document.documentElement.innerHTML  = dashboard;

Answer 3

其他答案替换身体的内部html。 OP希望追加：

依赖项：

npm install jsdom

解决方案：

const {JSDOM} = require("jsdom");
const fs      = require("fs");

const appendJSDOM = (dom, htmlFile) => {
    const html = fs.readFileSync(htmlFile).toString();
    dom.window.document.body.insertAdjacentHTML('beforeend', html);
}

JSDOM.fromFile("file1.html")
.then(dom => {
    appendJSDOM(dom ,"file2.html");
    console.log(dom.serialize());
});

您可以继续调用appendJSDOM()附加更多html文件。但是像其他答案所说的那样，您应该在其他html文件中省略<html>，<head>和<body>标签。

insertAdjacentHTML也可以将HTML插入不同的位置，具体取决于您输入的第一个参数。

在mocha测试文件中将一个html文件附加到JSDOM

3 个答案: