title: Can't Integrate HTML's DOM in NodeJS/ExpressJS
body: <p>Good day, hoomans! I badly need your help!</p>
  
  <p><strong>My question: Is there any way (in NodeJS/ExpressJS) to dynamically alter an element such as adding new li upon POST request like after clicking the submit button (without using jsdom though)?</strong></p>
  
  <p>I am developing a very simple application which should allow a client (student) to keep track of the lessons in his/her every class, monitor his/her grades, etc., with simple dynamic and real-time features. I am using Node.js EXPRESS, mySQL and AngularJS for this.</p>
  
  <hr>
  
  <p>I created a feature where a student can search for a class then receive a list of results real-time, which basically means I want to dynamically add <strong>li</strong> elements upon request without reloading the page or redirecting the client to another page.</p>
  
  <p>The process is: <strong>(1)</strong> the student types in the name of a class, <strong>(2)</strong> pass the textfield's value upon <strong>request (post)</strong>, <strong>(3)</strong> use the value as key for database search, <strong>(4)</strong> then return the data extracted from the database by populating the <strong>ul</strong> element.</p>
  
  <p>The database thing works. It is able to retrieve data from the database using the value entered in the textfield. However, when I add the code to dynamically add <strong>li</strong> element, I receive a runtime error every time the request is made. The code for this is found inside <strong>routes/grades.js</strong>. </p>
  
  <p>The error I get is:</p>
  
  <blockquote>
    <p>throw err; // Rethrow non-MySQL errors
            ^</p>
    
    <p>TypeError: req.body.getElementById is not a function</p>
  </blockquote>
  
  <p>and that is caused by this code block</p>
  
  <blockquote>
    <p>var ul = req.body.getElementById("search");</p>
    
    <p>var li = req.body.createElement("li");</p>
    
    <p>li.appendChild(req.body.createTextNode(reqObj["className"]));</p>
  </blockquote>
  
  <p>I believe <strong>createElement</strong> and <strong>createTextNode</strong> will also cause the same error message.</p>
  
  <p>I think this can be solved with <strong>jsdom</strong> but when I tried to install it through npm, I only received lots of errors so I gave up. Besides, I believe there is a simpler solution to this that I don't know yet. </p>
  
  <p>Here are the primary files for the functionality I mentioned above.</p>
  
  <p><strong>views/grades.ejs</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="ClassSaber"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;%= title %&gt;&lt;/title&gt;
      &lt;link rel='stylesheet' href='/stylesheets/style.css' /&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="javascripts/app.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="classController"&gt;
  &lt;% include template/header2.ejs %&gt;
  
  &lt;div class="lessons" id="homebranding_top"&gt;
      &lt;section&gt;
          &lt;h1&gt;Grades&lt;/h1&gt;
          &lt;hr&gt;
      &lt;/section&gt;
  
      &lt;section&gt;
          &lt;p&gt;
              Keeping track of your progress eh? That's great! Search your class and we'll show your grade.
          &lt;/p&gt;
      &lt;/section&gt;
  
      &lt;form&gt;
          &lt;section id="class_search"&gt;
              &lt;input type="text" id="search" ng-model="data.className" placeholder="Enter your class here..."&gt;
              &lt;input type="submit" value="Search" ng-click="classFun()"&gt;
  
              &lt;ul id="class_list"&gt;
                &lt;li ng-repeat="item in list | filter: data.className"&gt;
                    {{item.Class_Name}}
                &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/section&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>routes/grades.js</strong> </p>
  
  <pre><code>    var express = require('express');
  var router = express.Router();
  var path = require('path');
  
  /* GET lessons page. */
  router.get('/grades', function(req, res, next) {
      res.render('grades', { title: 'Class Saber | Grades' });
  });
  
  module.exports = router;
  
  //search class in the database
  router.post('/grades', function(req, res, next){
      try{
          var reqObj = req.body;
          console.log("Request Object: " + reqObj["className"]);
          req.getConnection(function(err, conn){
              if(err){
                  console.error('SQL Connection error: ', err);
                  return next(err);
              }
              else{
                  var insertSql = "SELECT Class_Name FROM classes WHERE Class_Name LIKE ?";
                  var insertValues = [
                      '%' + reqObj["className"] + '%'
                  ];
                  var query = conn.query(insertSql, insertValues, function(err, result){
                      if(err){
                          console.error('SQL error: ', err);
                          return next(err);
                      }
                      var ul = req.body.getElementById("search");
                      var li = req.body.createElement("li");
                      li.appendChild(req.body.createTextNode(reqObj["className"]));
                  });
              }
          });
      }
      catch(ex){
          console.err("Internal error: " + ex);
          return next(ex);
      }
  });
  </code></pre>
  
  <p><strong>public/javascripts/app.js</strong></p>
  
  <pre><code>var app = angular.module('ClassSaber', []);
  
  app.controller('classController', function($scope, $http){
      $scope.data = {};
  
      $scope.list = [
          {Class_Name: 'Math 101'},
          {Class_Name: 'Physics 101'},
          {Class_Name: 'Major Elective: Quantum Mechanics'}
      ];
  
      $scope.classFun = function(){
          console.log('Client triggered class search function...');
          $http({
              url: 'http://localhost:3000/grades',
              method: 'POST',
              data: $scope.data
          }).then(function (httpResponse){
              console.log('response', httpResponse);
          })
      }
  });
  </code></pre>