Node.js如何导入HTML文件？读取HTML追加内容不显示问题

你的代码有两个核心问题，导致追加的文本无法正常展示：

• fs.readFile 回调不符合Node.js的error-first规范：Node.js异步文件操作的回调第一个参数是错误对象，第二个参数才是读取到的文件内容。你当前写的function(data)只接收了第一个参数（也就是错误对象），读取成功时这个参数值为null，正常运行会直接抛错。如果你能看到页面上的"Node.js Stuff"，大概率是贴代码时遗漏了err形参。
• 追加内容的位置不合法：就算正确读取到HTML内容，你直接在完整HTML后拼接的"Hello World!"会被放在</html>闭合标签外，不属于合法的HTML结构，浏览器解析时很容易忽略这部分内容，不会正常渲染到页面上。

1. 补全fs.readFile的回调参数，加上错误判断，读取文件时指定utf-8编码直接拿到字符串格式的HTML内容，方便修改。
2. 把要追加的文本插入到</body>标签之前，保证返回的HTML结构合法。
3. 补充简单的请求路径判断，避免所有请求都返回HTML内容，导致后续静态资源（比如你引入的style.css）加载失败。

script.js #

var http = require('http');
var fs = require('fs');

http.createServer(function (req, res) {
    if (req.url === '/') {
        // 读取HTML文件，指定utf-8编码，回调补全err参数
        fs.readFile('index.html', 'utf-8', function(err, data) {
            if (err) {
                res.writeHead(500, {'Content-Type': 'text/plain; charset=utf-8'});
                res.end('文件读取失败：' + err.message);
                return;
            }
            // 将追加内容插入到</body>标签前，保证HTML结构合法
            const renderData = data.replace('</body>', '<p>Hello World!</p></body>');
            res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
            res.end(renderData);
        });
    } else {
        res.writeHead(404, {'Content-Type': 'text/plain; charset=utf-8'});
        res.end('请求的资源不存在');
    }
}).listen(8080);

index.html（原有内容无需修改） #

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <h1 class = "heading">Node.js Stuff</h1>
</body>

</html>

启动服务后访问8080端口，就能看到"Node.js Stuff"下方正常显示追加的"Hello World!"文本。

注：如果需要实现更复杂的HTML内容拼接、静态资源服务，不建议手动拼字符串，可以使用模板引擎或者成熟的Node.js Web框架减少这类基础错误。

内容的提问来源于stack exchange，提问作者two