CODEWITHSUNDEEP
jquerynode.jsexpress
Danny Liu
Danny Liu

Reputation: 519

How to change front-end html using node.js

So I want to make changes on my front-end html file from my node.js backend. How would I do so? (Any suggestions with examples would be greatly appreciated)

Here's where I would like to change it:

router.post('/change', function(req, res){
    console.log(req.body.list);
    //modify html DOM here!!
    //preferably using jQuery
})

Upvotes: 6

Views: 20186

Answers (2)

Mitia
Mitia

Reputation: 1

I recently ran into a similar problem, a solution I found was to use fs.readFile to open the original html file and then use cheerio library to alter html elements:

const express = require("express");
const app = express();
const cheerio = require("cheerio");
const fs = require("fs");
const https = require("https");

app.post("/", function(req, res) {
  var userInput = req.body.userInput;

  fs.readFile(index.html, "utf8", function(err, data) {
    if (err) throw err;

    var $ = cheerio.load(data);

    $(".some-class").text("returned user input: " + userInput);
    res.send($.html());
  });
});

Upvotes: 0

elloM8
elloM8

Reputation: 164

You can't modify from the node side in the way that I think your're trying to do. You can send back a response to the client side, and on that response, you can trigger a function ( that you can write in JQuery ) that will change the DOM and save what needs to be changed in local storage ... here is an example ...

//server.js
router.post('/change',function(req,res){

    // the message being sent back will be saved in a localSession variable
    // send back a couple list items to be added to the DOM
    res.send({success: true, message: '<li>New list item number 1</li><li>New list item number 2</li>'});
});

Here is the front end ...

//index.html
//body
<h1>Hello World</h1>
    <ul>
        <li>List item 1</li>
         //li items with class change will be changed on button click
        <li class='change'>List item 2</li>
        <button class="trigger">Trigger Change</button>
    </ul>

<script>

   //if we have data stored in the session variable, then use the data to change the DOM text
    if(window.localStorage.permanentData){
        $('li.change').replaceWith(window.localStorage.permanentData);
    }

    //change DOM function
    function changeDom(){
        //ajax call
         $.ajax({
                  url: 'http://localhost:8080/change',
                  method:'POST',
                  data: {list: "some info"}
                }).done(function(data){
                    //if we have a successful post request ... 
                    if(data.success){
                        //change the DOM &
                        //set the data in local storage to persist upon page request
                        localStorage.setItem("permanentData", data.message);
                        var savedText = localStorage.getItem("permanentData");
                        $('li.change').replaceWith(savedText);

                        return;
                    }
                }).fail(function(){
                   //do nothing ....
                    console.log('failed...');
                    return;
                });
        };

    //trigger change DOM  function
    $('.trigger').click(function(){
        changeDom();
    });

</script>

Upvotes: 5

Related Questions