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
})
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With