如何使用Javascript在HTML文档中插入元素？_Javascript_Html_Node.js

如何使用Javascript在HTML文档中插入元素？

javascript html node.js

如何使用Javascript在HTML文档中插入元素？,javascript,html,node.js,Javascript,Html,Node.js,我正在尝试使用NodeJS修改位于同一目录中的外部HTML文件。在我的index.js文件中，我写道： As index.html是一个有效的文档。但它看起来没有正确地阅读，因为我得到了一个错误： TypeError:无法读取未定义的属性“innerHTML” 我猜html没有得到任何作为主体的东西如何使用JavaScript更改HTML？innerHTML是DOM解析后提供的一个函数。这里您使用的是一个字符串，因此您可以使用DOM解析器来创建结构，也可以使用正则表达式来隔离要替换的部分并附加

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

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

TypeError:无法读取未定义的属性“innerHTML”

我猜html没有得到任何作为主体的东西

如何使用JavaScript更改HTML？

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

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

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

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

为了能够在浏览器中操作html文件，首先需要对其进行解析

也许会有用？或者，如果不需要几毫秒的解析，并且您需要更多的功能，那么该软件包也非常受欢迎。

为了以浏览器中的方式操作html文件，您首先需要解析它

也许会有用？或者，如果几毫秒的解析不是一个问题，您需要更多的功能，那么这个包也非常流行。

下面是一个使用

HTML文件

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

还有nodej

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!
 });

考虑到下载量，可能有比节点html解析器更好的解决方案。例如，有更多的下载，但它看起来也更复杂：

下面是一个使用

HTML文件

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

还有nodej

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!
 });

考虑到下载量，可能有比节点html解析器更好的解决方案。例如，它有更多的下载，但它看起来也更复杂：

它不是这样工作的。在您的情况下，它只是一个字符串。试着用解析它，例如在定义html.body的地方？无法读取未定义错误的属性“innerHTML”已在it@AbhishekPandey我的HTML文档如下所示：Node JS@JeanlucaScaljeri谢谢，它看起来很有趣。我会尽力做到这一点。这不是它的工作原理。在您的情况下，它只是一个字符串。试着用解析它，例如在定义html.body的地方？无法读取未定义错误的属性“innerHTML”已在it@AbhishekPandey我的HTML文档如下所示：Node JS@JeanlucaScaljeri谢谢，它看起来很有趣。我将尝试贯穿整个过程。没错，但我现在的主要问题是，我没有在htmlvariable中获取HTML文档。现在我得到了TypeError:html.replace不是一个函数。您确定路径正确吗？我的意思是，这是基本的文件读取，一旦回调中有了字符串，就应该很容易了。您得到的错误是什么？在您的情况下，readFile返回一个缓冲区。以fs.readFile'index.html'，utf8'，err，html=>{…}的形式读取该文件，它就会工作。但是使用正则表达式执行此操作是脆弱的，不要这样做，而是使用解析器！没错，但我现在的主要问题是，我没有在htmlvariable中获取HTML文档。现在我得到了TypeError:html.replace不是一个函数。您确定路径正确吗？我的意思是，这是基本的文件读取，一旦回调中有了字符串，就应该很容易了。您得到的错误是什么？在您的情况下，readFile返回一个缓冲区。以fs.readFile'index.html'，utf8'，err，html=>{…}的形式读取该文件，它就会工作。但是使用正则表达式执行此操作是脆弱的，不要这样做，而是使用解析器！我不得不将'fs.readFile'的第二个参数改为utf8，但它看起来很棒。非常感谢你！另外，html解析器看起来对更复杂的事情很有帮助。我不得不将'fs.readFile'的第二个参数改为utf8，但它看起来很棒。非常感谢你！另外，html解析器看起来对更复杂的事情很有帮助。