是否有node.js方法读取index.html文件并添加新元素？_Node.js

是否有node.js方法读取index.html文件并添加新元素？

node.js

是否有node.js方法读取index.html文件并添加新元素？,node.js,Node.js,我试图从我的server.js读取index.html文件，以便添加一个新的链接到我生成的新html文件。我正在使用POST方法来实现这一点，并且可以成功地生成新的HTML文件，但是我不确定如何在index.HTML中添加新的这是我的server.js： //POST method if(req.method === 'POST'){ req.on('data', (data) => { let elementObj = querystring.parse

我试图从我的server.js读取index.html文件，以便添加一个新的

链接到我生成的新html文件。我正在使用POST方法来实现这一点，并且可以成功地生成新的HTML文件，但是我不确定如何在index.HTML中添加新的

这是我的server.js：

    //POST method
  if(req.method === 'POST'){
    req.on('data', (data) => {
      let elementObj = querystring.parse(data.toString());
      element = elementObj.elementName;
      elementSymbol = elementObj.elementSymbol;
      elementAtomic = elementObj.elementAtomicNumber;
      elementDescription = elementObj.elementDescription;

      let newElement = fs.createWriteStream(`./public/${element}.html`);
      newElement.write(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Elements - ${element}</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>${element}</h1>
<h2>${elementSymbol}</h2>
<h3>Atomic number ${elementAtomic}</h3>
<p>${elementDescription}</p>
<p><a href="/">back</a></p>
</body>
</html>`);

      let indexElements = document.querySelector('#elements');
      let li = document.createElement('li');
      let a = document.createElement('a');
      a.setAttribute('href', `/${element}.html`);
      let elem = document.querySelector(`a[href = "/${element}.html"]`);
      elem.innerHTML = `${element}`;

      indexElements.appendChild(li);
      li.appendChild(a);

      res.end(data);
    });
  }

//POST方法
如果（请求方法=='POST'）{
请求on（'数据'，（数据）=>{
让elementObj=querystring.parse（data.toString（））；
element=elementObj.elementName；
elementSymbol=elementObj.elementSymbol；
elementAtomic=elementObj.elementAtomicNumber；
elementDescription=elementObj.elementDescription；
让newElement=fs.createWriteStream（`./public/${element}.html`）；
newElement.write(`
元素-${element}
${element}
${elementSymbol}
原子序数${elementAtomic}
${elementDescription}

`);
让indexElements=document.querySelector（“#elements”）；
设li=document.createElement（'li'）；
设a=document.createElement（'a'）；
a、 setAttribute（'href'，`/${element}.html`）；
让elem=document.querySelector（`a[href=“/${element}.html”]`）；
elem.innerHTML=`${element}`；
依附儿童（li）；
李.儿童（a）；
res.end（数据）；
});
}

这是我的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>The Elements</title>
  <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
  <h1>The Elements</h1>
  <h2>These are all the known elements.</h2>
  <h3>These are 2</h3>
  <ol id = 'elements'>
    <li>
      <a href="/hydrogen.html">Hydrogen</a>
    </li>
    <li>
      <a href="/helium.html">Helium</a>
    </li>
  </ol>
<script src="../../server.js"></script>
</body>
</html>


元素
元素
这些都是已知的元素。
这些是2

我希望在我新修改的index.html中得到的结果（添加了新的'code'

）：


元素
元素
这些都是已知的元素。
这些是2

您的问题并没有明确说明您正试图做什么，但如果这些是您的要求：

您希望在磁盘上有一个HTML模板

您可以基于一些动态数据将一些内容插入其中

除了plain node.js http服务器，您不能使用其他任何东西（因此没有现有的模板引擎）

然后，您必须构建自己的小模板引擎。您可以通过将文件读入内存，然后对文件中的某些标记进行某种搜索/替换来插入内容，然后发送新形成的内容。以下是如何做到这一点的总体思路：

磁盘上template.html文件的内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>The Elements</title>
  <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
  <h1>The Elements</h1>
  <h2>These are all the known elements.</h2>
  <h3>These are 2</h3>
  <ol id='elements'>
    <li>
      <a href="/hydrogen.html">Hydrogen</a>
    </li>
    <li>
      <a href="/helium.html">Helium</a>
    </li>
    <!-- new elements -->
  </ol>
<script src="../../server.js"></script>
</body>
</html>


元素
元素
这些都是已知的元素。
这些是2

用于处理POST的服务器代码

//POST method
if(req.method === 'POST'){
    req.on('data', (data) => {
        let elementObj = querystring.parse(data.toString());
        let element = elementObj.elementName;
        let elementSymbol = elementObj.elementSymbol;
        let elementAtomic = elementObj.elementAtomicNumber;
        let elementDescription = elementObj.elementDescription;

        fs.readFile("template.html", function(err, data) {
            if (err) return res.status(500).end();
            // build new content
            let newContent = "<li><a href=${element}.html>${element}</a></li>";
            data = data.replace(/<!-- new elements -->/, newContent);
            res.send(data);
        });
    });
});

//POST方法
如果（请求方法=='POST'）{
请求on（'数据'，（数据）=>{
让elementObj=querystring.parse（data.toString（））；
let element=elementObj.elementName；
设elementSymbol=elementObj.elementSymbol；
设elementAtomic=elementObj.elementAtomicNumber；
让elementDescription=elementObj.elementDescription；
fs.readFile（“template.html”，函数（err，data）{
if（err）返回res.status（500.end（）；
//构建新内容
让newContent=“”；
data=data.replace（/，newContent）；
res.send（数据）；
});
});
});

很难准确说出您要做什么，因为您可能会对服务器上运行的代码和浏览器中运行的代码感到困惑。但是，（这里只是猜测一下）您可能需要的是模板，这样您就可以为HTML文件创建一个shell，然后使用数据填充HTML shell中的各个部分，然后在请求时将其发送给客户端。我建议在这里读一读。如果您没有在web服务器上使用Express，您可能应该这样做。@jfriend00谢谢，是的，我知道DOM脚本不属于服务器，但这是我所能想到的。不幸的是，这是任务的一部分，我们不允许使用node.js以外的任何东西来完成。

//POST method
if(req.method === 'POST'){
    req.on('data', (data) => {
        let elementObj = querystring.parse(data.toString());
        let element = elementObj.elementName;
        let elementSymbol = elementObj.elementSymbol;
        let elementAtomic = elementObj.elementAtomicNumber;
        let elementDescription = elementObj.elementDescription;

        fs.readFile("template.html", function(err, data) {
            if (err) return res.status(500).end();
            // build new content
            let newContent = "<li><a href=${element}.html>${element}</a></li>";
            data = data.replace(/<!-- new elements -->/, newContent);
            res.send(data);
        });
    });
});