所以问题是,我试图得到一个html元素,并改变它的innerHTML。
在其他任何事情之前,我将首先说,我的应用程序需要连接到数据库,也需要执行所有四个CRUD操作,当我尝试连接到数据库,并通过cmd运行它(当HTML还没有涉及)它工作。当我把它放在服务器上(localhost 3000)它也工作,但问题是,我有一个段落在我的HTML,我希望它显示"成功连接到数据库"但这就是问题开始的地方,我无法访问DOM元素,我试图用几种方式访问它,这是我的代码:
var http = require('http');
var fs = require('fs');
const PORT=3000;
fs.readFile('./conn.html', function (err, html) {
if (err) throw err;
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"});
response.write(html);
response.end();
this.html = html;
}).listen(PORT);
});
所以我首先尝试做document.getElementById(...)
,它没有工作,这是可以理解的,但后来我尝试用html和响应替换文档,仍然没有工作,现在我对我应该做什么感到困惑。
谁能给我一个解决这个问题的方法?
cheerio将允许您像访问web浏览器文档一样访问HTML内容。
import * as cheerio from 'cheerio';
const $ = cheerio.load(html)
$('#message').text(`Successfully connected to the database`)
但是你可能会发现使用"模板"或";调整;系统,如果你正在构建一个web应用。
fasttify/Koa/Express都支持从模板构建HTML响应。
<html>
<body>
<div id="message" class="message">
{{ my_message }}
</div>
</body>
</html>
然后是Next (Vue), Sveltekit (Svelte)和Next (React),它们支持从javascript组件构建更多交互式页面。
<script setup>
const my_message = `Successfully connected to the database`
</script>
<template>
<div id="message" class="message">
{{ my_message }}!
</div>
</template>