document.getElementById.innerHTML 不适用于 ejs-javascript

Question

我目前正在使用 Express.js 和 Windows 中带有 javascript 的 ejs 开发我们的实验室主页 10。Web 浏览器是 Google Chrome， IDE 是网络风暴。但是周围有一些错误。
现在我正在尝试显示 2 列图像的内容，但它没有出现在页面上。
我怀疑我的代码存在关于 document.getElementById.innerHTML 的问题。我在这里查找所有答案，但没有我想要的确切答案。
我尝试了所有方法，包括将 "script" 部分移动到 "body" 的最后部分。我怀疑document.getElementById.innerHTML的原因是

First 当我将 img src 的某些部分插入到 ejs 文件时，它工作得很好

第二个 当我在 google chrome 中检查开发人员控制台时，没有我期望的部分（div 和 img src 部分）

Third 在IDE console 中，JavaScript 文件没有报错，具有向ejs 注入html 代码的功能。

我真的很想知道为什么会这样。我想弄清楚好几天了。

p.s。因为我不会说英语，所以表达上可能有些歧义。请告诉我。

这是我的代码
index.js

var express = require('express');
var mysql = require('mysql');
var app = express();

var connection = mysql.createConnection({
  host:'bisltest.kaist.ac.kr',
  port:3306,
  user:'root',
  password:'bisl2016bsrc1',
  database:'BISL_homepage'
});
connection.connect(function(err){
  if (err){
    console.error('mysql connection error');
    console.error(err);
    throw err;
  }
});
app.use(express.static(__dirname + '/public'))
.
.
//some stuff
.
.
router.get('/album',function(req,res,next) {

  var query = connection.query("select image_link from album", function (err, result, fields) {
    if (err) {
      throw err;
    }
    res.render('album.ejs', {
      title: 'Express',
      results:result
    });
  });
})

album.ejs

   <!DOCTYPE html>
    <!-- === BEGIN HEADER ===-->
    <!--if IE 8html.ie8(lang='en')
    -->
    <!--if IE 9html.ie9(lang='en')
    -->
    <!-- [if !IE] <!-->
    <html lang="en">
      <!-- <![endif]-->
      <head>

        <title>Habitat - A Professional Bootstrap Template</title>


        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="description" content=""/>
        <meta name="author" content=""/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

        <link href="favicon.ico" rel="shortcut icon"/>

        <link rel="stylesheet" href="stylesheets/bootstrap.css"/>

        <link rel="stylesheet" href="stylesheets/animate.css"/>
        <link rel="stylesheet" href="stylesheets/font-awesome.css"/>
        <link rel="stylesheet" href="stylesheets/nexus.css"/>
        <link rel="stylesheet" href="stylesheets/responsive.css"/>
        <link rel="stylesheet" href="stylesheets/custom.css"/>

        <link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300" rel="stylesheet" type="text/css"/>
      </head>
      <body>
        <div id="body-bg">

          <div id="header">
            <div class="container">
              <div class="row">

                <div class="logo"><a href="home" title=""><img src="images/BISL_logo.png" alt="Logo"/></a></div>

              </div>
            </div>
          </div>

          <div id="hornav" class="bottom-border-shadow">
            <div class="container no-padding border-bottom">
              <div class="row">
                <div class="col-md-10 no-padding">
                  <div class="visible-lg">
                    <ul id="hornavmenu" class="nav navbar-nav">
                      <li><a href="home" class="fa-home active">Home</a></li>
                      <li><a href="Professor" class="fa-user">Professor</a></li>
                      <li><a href="Research" class="fa-copy">Research</a></li>
                      <li><a href="Publication" class="fa-copy">Publication</a></li>
                      <li><a href="Patent" class="fa-copy">Patent</a></li>
                      <li><a href="Member" class="fa-users">Member</a></li>
                      <li><a href="album" class="fa-camera">Album</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div>
          <div class="container background-white">
            <div class="row margin-vert-30">
              <div class="col-md-12">
                <h2>BISL Album</h2>
              </div>
            </div>
            <div class="row">
              <div id="album" class="col-md-12 portfolio-group no-padding">
              </div>
            </div>
          </div>
        </div>
.
.
//some stuff
.
.
<script type="text/javascript" src="javascripts/ejs_edit.js" charset="utf-8"></script>
    <script type="text/javascript">
      var s = JSON.stringify(results)
      loop_for_ejs(s)
    </script>

ejs_edit.js

function loop_for_ejs(S){
    for(var v in S){
        var line =  "";
        line +='<'+'div class=\"col-md-6 portfolio-item margin-bottom-40 filer-code\">'+ '<div><a href=\"'+S[v].image_link+'\">'+'<figure><img src=\"'+S[v].image_link+'\">'+ '</figure>'+ '</a>'+ '</div>'+ '</div>';
        document.getElementById('album').innerHTML+=line;
    };
}

Answer 1

您没有告诉 ejs 将 results 渲染到 html 中，至少在您发布的代码中没有。在您的 album.ejs 文件中，更改：

var s = JSON.stringify(results);
loop_for_ejs(s);

收件人：

var s = <%- JSON.stringify(results) %>;
loop_for_ejs(s);

或：

或者，如果您已经在您尚未发布的其他部分执行此操作，则不应在调用 loop_for_ejs 之前在 results 上调用 JSON.stringify，因为您然后将遍历字符串的字符，而不是行数组（因此 S[v].image_link 将始终计算为 undefined）。试试这个：

loop_for_ejs(results);

document.getElementById.innerHTML 不适用于 ejs-javascript

document.getElementById.innerHTML not working for ejs-javascript

javascript

ejs

node.js

express