NodeJS:从对象动态创建html

时间:2019-01-25 10:45:10

标签: javascript node.js

我正在使用API​​,以NodeJS中的对象形式获取内容。该对象具有标题,文本和几个表。现在,我要遍历此对象,从中创建HTML并将其传递给我的数据库。在基本的JS中,我将简单地遍历objects元素,并使用“ document.createElement(..)”一一创建HTML元素。但是,正如我发现的那样,“文档”在NodeJS中不可用。

所以我想知道是否有类似的方法?我看到了一些我只使用字符串的选项,例如:var elem = '<div>' + text + '</div>';。但是,我想知道是否还有其他更漂亮的选择来解决这个问题。

2 个答案:

答案 0 :(得分:1)

jsdom有解决方案

  

jsdom是许多网络标准的纯JavaScript实现,   特别是与Node.js一起使用的WHATWG DOM和HTML标准。在   通常,该项目的目标是模拟一个   网络浏览器对于测试和抓取真实的网络很有用   应用程序。

答案 1 :(得分:0)

我为您提供解决方案。使用这种方法,我会忽略数据库,因为您有许多方法可以从那里更新/检索数据。

您可以使用ejs更新在“ html”文件中呈现的数据。

值得注意的是,如果您由于某种原因无法使用此解决方案,那么我也正在使用express服务我的前端。

HTML在这里用引号引起来,因为使用ejs的第一步是复制html文件并将其放置在名为“ views”的文件夹中(这是ejs默认用于查找文件的文件夹),然后将文件重命名为“ .ejs”,并在需要动态数据的任何地方添加占位符。

例如,您的“ index.html”文件变为“ index.ejs”,现在放置在新创建的顶级文件夹“ views”中。

占位符如下:

<%= YourVariableNameHere &?> 

然后,在app.express();减速后,您需要在js文件中添加以下行

app.set('view engine' ,ejs');

然后在您的app.get("/", req,res) => {...内添加以下行:

res.render('index.ejs', {YourVariableNameHere :"Placeholder Default Message"});

这将在您的页面首次打开时呈现您的默认消息。现在,在app.post方法中,您可以在弄清要显示的内容后重新使用res.render,并使用它来更新和动态更改前端显示的内容。

您可以构建显示字符串或将字符串变量传递到“占位符默认消息”中。还值得注意的是,也可以在此处传递html和换行符“ \ n”,但是要使其在浏览器中正确呈现,您需要添加style="white-space: pre; text-align: center;"作为CSS或标记。