NodeJS - 如何使用 Javascript 在 HTML 文档中插入元素？答案

【问题标题】：NodeJS - How to insert an element in a HTML document using Javascript?NodeJS - 如何使用 Javascript 在 HTML 文档中插入元素？
【发布时间】：2021-09-20 22:23:14
【问题描述】：

我正在尝试使用 NodeJS 修改外部 HTML 文件（位于同一目录中）。在我的 index.js 文件中我写：

fs.readFile('index.html', (err,html)=>{
  if(err){
     throw err;
  }

html.body.innerHTML += '<div id = "asdf"></div>';

});

因为 index.html 是一个有效的文档。但它看起来并没有正确读取它，因为我得到了一个错误：

“TypeError：无法读取未定义的属性'innerHTML'”。

我猜 html 没有得到任何作为正文的东西。

如何使用 JavaScript 对 HTML 进行更改？

【问题讨论】：

这不是它的工作原理。在您的情况下，它只是一个字符串。尝试解析它，例如npmjs.com/package/node-html-parser
html.body 是在哪里定义的？ Cannot read property 'innerHTML' of undefined 错误已经说出来了
@AbhishekPandey 我的 HTML 文档如下所示：<html> <body> <h1>Node JS</h1> </body> </html>
@JeanlucaScaljeri 谢谢，它看起来很有趣。我会努力完成整个过程。

标签： javascript html node.js

【解决方案1】：

这里是一个使用node-html-parse的例子

HTML 文件

<html>
   <body>
      <div id="fist">yolo</div>
   </body>
</html>

还有nodejs

const fs = require('fs');
const parse = require('node-html-parser').parse;

fs.readFile('index.html', 'utf8', (err,html)=>{
   if(err){
      throw err;
   }

   const root = parse(html);

   const body = root.querySelector('body');
   //body.set_content('<div id = "asdf"></div>');
   body.appendChild('<div id = "asdf"></div>');

   console.log(root.toString()); // This you can write back to file!
 });

考虑到下载量，可能有比 node-html-parser 更好的解决方案。例如，htmlparser2 的下载量要多得多，但看起来也更复杂 :)

【讨论】：

我不得不将 'fs.readFile' 的第二个参数更改为 utf8，但它看起来很棒。太感谢了！此外，html 解析器看起来对更复杂的事情很有帮助。

【解决方案2】：

为了像在浏览器中那样操作 html 文件，您首先需要解析它。

也许node-html-parser 可以用？（或者，如果几毫秒的解析不是问题，并且您想要更多功能，JSDOM 包也很受欢迎。）

【讨论】：

【解决方案3】：

innerHTML 是 DOM 解析后提供的函数。这里您使用的是字符串，因此您可以使用 DOM 解析器来创建结构，也可以只使用正则表达式来隔离要替换的部分并附加文本。

html.replace("</body>",'<div id = "asdf"></div></body>');

【讨论】：

没错，但我现在的主要问题是我没有在htmlvariable 中获得HTML 文档。现在我收到TypeError: html.replace is not a function。
您确定路径正确吗？我的意思是，这是基本的文件读取，一旦你在回调中有字符串，它应该很容易。你得到什么错误？
在您的情况下，readFile 返回Buffer。将文件读取为fs.readFile('index.html', 'utf8', (err, html) => { ... })，它将起作用。但是使用 RegExes 这样做很脆弱，不要这样做并使用解析器！