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
})
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>
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());
});
});
