title: Update part of HTML page using NODE.JS and EJS
body: <p>I have the following express app which just renders the <strong>sample.ejs</strong> page. On that page when I press the button the attached script changes the div text to 
  "THIS IS FROM J QUERY. I want the same thing to happen but I want the data to be coming from a database. In my express app if I try to use <strong>res.render();</strong> every time I click the button then it reloads the page which I don't want. So is there a way to achieve this without reloading page and only update part of page?
  I have searched stack overflow and the web but can't get an appropriate answer or maybe I just am unable to understand. I know this is a very basic thing to ask. </p>
  
  <p><strong>APP.js</strong></p>
  
  <pre><code>var express = require('express');
  var app = express();
  app.use(express.static('public'));
  app.use(express.static('./src/views'));
  app.set('views', './src/views');
  app.set('view engine' , 'ejs');
  
  app.listen(3000 , (err)=&gt;{console.log('Listening')});
  
  app.get('/' , function(req , res) {
      res.render('sample' , {result_from_database: res.body} );   
  });
  </code></pre>
  
  <p><strong>sample.ejs</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Sample HTML File&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="holder"&gt;
          WELCOME
      &lt;/div&gt;
      &lt;form&gt;
          &lt;button type="button" id="HButton"&gt; HELLO &lt;/button&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  
  &lt;script&gt;
      $(document).ready(function () {
          var form = $("#holder");
  
          $("#HButton").on("click", function () {
              form.html("THIS IS FROM J QUERY");
          });
      });
  &lt;/script&gt;
  
  &lt;script src="/lib/jquery/dist/jquery.js"&gt;&lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Now this is what I want to do </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Sample HTML File&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="holder"&gt;
          &lt;%= result_from_database %&gt;
      &lt;/div&gt;
      &lt;form&gt;
          &lt;button type="button" id="HButton"&gt; HELLO &lt;/button&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  
  &lt;script&gt;
      $(document).ready(function () {
          var my_div = $("#holder");
          $("#HButton").on("click", function () {
  
            /* Tell app.js that I clicked a button and then app.js
               query the database and using ejs or something else update the
               my_div inner html with the database result without
               reloading page */
          });
      });
  &lt;/script&gt;
  
  &lt;script src="/lib/jquery/dist/jquery.js"&gt;&lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>NOTE:</strong> I'm not asking how to query the database</p>
  
  <p>-Thanks</p>