在nodejs-express车把中更新没有jquery的div内容答案

【问题标题】：update content of div without jquery in nodejs-express handlebar在nodejs-express车把中更新没有jquery的div内容
【发布时间】：2018-12-31 05:51:35
【问题描述】：

我知道如何用JQuery改变一个div标签的内容，但是现在我想知道如果我不想用JQuery，我可以改变loginDiv标签的内容吗？我不确定如何使用 router.post 的响应设置 div 标签 loginDiv 的值。你能帮我吗？或者如果我想要一个页面而不刷新我需要使用 Jquery 的页面？

我正在使用 NodeJS express 车把。

index.hbs：

<div  class="col-md-10">
                            <div id="loginDiv"></div>
                            <form role="form" action="/login" method="post" name="login"  onsubmit="return validateLoginForm()">
                                <fieldset>                          
                                    <div class="form-group">
                                        <label for="username" class="font-weight-bold">Email</label>
                                        <input type="email" name="username" id="username" class="form-control input-lg" placeholder="YourEmail@domain.com">
                                    </div>
                                    <div class="form-group">
                                        <label for="passwordlogin" class="font-weight-bold">Password</label>
                                        <input type="password" name="passwordlogin" id="passwordlogin" class="form-control input-lg" placeholder="Password">
                                    </div>
                                    <div class="div-padding">
                                        <input type="submit" class="btn btn-primary" value="Sign In">
                                        <button type="button" class="btn btn-link">Forget?</button>
                                    </div>
                                </fieldset>
                            </form> 
                        </div>

index.js：

var express = require('express');
var path = require('path');
router.post('/login',function(req, res, next) {
  // How to write something in loginDiv
});

【问题讨论】：

由于您使用的是服务器端把手，您可以使用把手配置在服务器上设置文本，然后再发送到浏览器。 jQuery 仅在浏览器内部。在浏览器中，您可以创建一个 ajax 请求来加载数据并设置 div 内容而不刷新。
@XPD：所以你的意思是我们不能直接设置任何内容，我只需要使用 jquery 来设置帖子值
你使用server-side templating。调用res.render("view file", data) 并在视图文件中使用data 动态填充它。
由于您使用的是车把，您可以在帖子中使用它来设置此 div 的值。见github.com/ericf/express-handlebars/blob/master/README.md
你有没有看过我以前的cmets？我要告诉你多少次如何做到这一点？使用服务器端模板；使用res.render()。

标签： javascript jquery html node.js

【解决方案1】：

使用 document.innerHTML 可以轻松更改原生 javascript 中的值

//to replace the content:
document.getElementById('container').innerHTML = "<p>Yay! a paragraph!</p>"

//to ADD content: 
document.getElementById('container').innerHTML += "<p>Yay! Another paragraph!</p>"

【讨论】：

我需要添加任何包吗？
问题标题有误导性，问题其实是关于服务器端模板的。

【解决方案2】：

如果您知道 HTML 字符串是有效的，您可以随时恢复到 innerHTML。

document.getElementById('loginDiv').innerHTML = "<b>Hello, World!</b>";

【讨论】：

你确定在我的路由器中的 nodejs 中我可以直接访问我的文档吗？我怕我可以。
不，你不能。问题标题具有误导性，问题实际上是关于服务器端模板的。
@ChrisG：如果你建议一个标题，我将不胜感激。
@Amir 我很乐意，但您必须先澄清“更新”的含义。