如何使用节点 js 更改 HTML 内容答案

【问题标题】：How can I change HTML content by using node js如何使用节点 js 更改 HTML 内容
【发布时间】：2020-03-26 21:24:51
【问题描述】：

我想在下面更改我的 HTML 文件 (index.html) 内容

<html>
<body>
   <div id="greeting">Hello world</div>
</body>
</html>

到别的东西，通过在后端（Node js）中执行此操作。这是nodejs代码：

var express = require("express");
var app = express();
var server = require('http').createServer(app);

app.get('/', function (req, res, ext) {
    res.sendFile(__dirname + '/public/index.html');
});

app.use(express.static('public'));

server.listen(8000);

对不起，如果我的话不清楚，请原谅我的英语。

【问题讨论】：

这有点太宽泛了，你有使用模板引擎或根据请求提供 HTML 的 node.js 应用程序吗？
看看这个 repo npmjs.com/package/cheerio
@Tran Linh 看我的回答。
嗯，我发现了，使用socket.io给我一个类似于我想要的答案

标签： html node.js

【解决方案1】：

更改内容的最简单方法

<div id="greeting">Hello world</div>

将创建一个 Index.js 和

import React from 'react'
import ReactDOM from 'react-dom'


const theDiv = document.getElementById("greeting")

function NewContent(props){
    return(
        <div>
            New Content
        </div>
    )
}

ReactDOM.render(<NewContent/>, theDiv)

我已经导入 react 和 react dom
我已经抓取了问候 div 并将其放在“theDiv”中
我创建了一个名为 NewContent 的 react 组件
然后我告诉 react 在 theDiv 中渲染 newContent

【讨论】：

我只是编辑我的问题。如果我在服务器上运行我的 HTML 文件，如何在某些特定事件（例如点击）中更改其内容？
@Ryan Tran 想通过从他的浏览器发送请求等来更改内容。我认为他不想使用 reactjs。
你有两个主要的选择——一个，用javascript把它放到前端，然后在那里改变它。 Ryan 的使用 React 的建议会让你这样做。选项二是向服务器发送消息，然后让服务器生成一个新页面并显示该页面。您可以考虑阅读 nextjs 以了解一种方法。
由于某些原因，我想在后端使用 node js 来做。对不起，我在这方面很糟糕：（

【解决方案2】：

你可以这样做：-

向您的index.html 添加一个表单，单击该表单会发送请求：

<html>
<body>
   <div id="greeting">Hello world</div>
   <form action="/change-content" method="POST">
    <button type="submit">Change content</button>
   </form>
</body>
</html>

在节点应用中你可以收听：

app.post('/', function (req, res, ext) {
    res.sendFile(__dirname + '/public/anotherFile.html');
});

因此，请确保在单击按钮时提供另一个 HTML 文件。

anotherFile.html 可以是你想要的任何东西

<html>
<body>
   <div>Node.js</div>
</body>
</html>

这只是一种方法，通常您可能希望使用更好的应用程序结构并将不同的 HTML 文件移动到一个文件夹中。

【讨论】：

谢谢，但我想将数据传递给我的 HTML 文件，我该怎么办？？
如果你想传递动态数据，那么你应该使用像 EJS 这样的模板引擎。它允许您在模板中编写 javascript。