Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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
})
like image 268
Danny Liu Avatar asked Jan 06 '16 21:01

Danny Liu


People also ask

Can we do front end with node js?

A common misconception among developers is that Node. js is a backend framework and is only used for building servers. This isn't true: Node. js can be used both on the frontend and the backend.

Can Nodejs be used with HTML?

Run nodemon to start the server. Whenever the server is running, and accessing the route http://localhost:3000/ , it will output the plain text hello world! . We can use the same server to render HTML elements as the server response instead of sending plain text. Here is a list of some HTML elements.


1 Answers

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>
like image 134
elloM8 Avatar answered Oct 08 '22 20:10

elloM8