Jongyeol Baek Jongyeol Baek - 1 year ago 203
Node.js Question

document.getElementById.innerHTML not working for ejs-javascript

I'm currently working on our lab homepage using Express.js and ejs with javascript in Windows 10. Web browser is Google Chrome, and IDE is Web Storm.
But there is some errors around.

Now I'm trying to display the content which is 2 columns of image, but It does not come up to the page.

I suspect that there is issue about document.getElementById.innerHTML with my code.
I look up all the answers here, but there is no exact answer I want.

I tried everything including moving "script" section to the last of "body".
The reason I suspect document.getElementById.innerHTML is

First It works perfectly when I insert some part of img src to ejs file

Second When I inspect developer console in google chrome, there isn't part I expected (div and img src part)

Third In IDE console, there is no error for JavaScript file that have function for injecting html code to ejs.

I really want to know why this is happening. I'm trying to figure out for several days.

p.s. Because I'm not an English speaker, there may be some ambiguity in expression. Please let me know.

here is my code

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

var connection = mysql.createConnection({
if (err){
console.error('mysql connection error');
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',


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

<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=",300" rel="stylesheet" type="text/css"/>
<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 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>

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


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>';

Answer Source

You are not telling ejs to render results into the html, at least not in the code you've posted. In your album.ejs file, change:

var s = JSON.stringify(results);


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


Alternatively, if you are already doing this in some other section that you haven't posted, you shouldn't call JSON.stringify on results before calling loop_for_ejs, since you would then be iterating over the characters of a string, not an array of rows (and therefore S[v].image_link will always evaluate to undefined). Try this instead then:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download