I am trying to append an HTML text to an HTML file using cheerio. Specifically to add a navigation bar. However whenever the function is called, and I open the HTML file to see if the navigation bar is appended, there are nothing. can anyone help?
var addNavBarW3CSS = function(){
let readManipulateFileName = 'generated_web/'+fileNameChosen+'.html';
const $ = cheerio.load(fs.readFileSync(readManipulateFileName,'utf8'));
var navText="";
rl.question("Please enter Navigation Text: \n",function(answer) {
navText='<a href="#contact" class="w3-bar-item w3-button" style="width:25% !important">'+answer+'</a>';
$('#navItem1').append(navText);
console.log(navText+" succesfully appended to navigation");
createMobileWebPageSubmenu();
});
}
The div element inside different file that im trying to append. Basically the navigation bar file
<!-- Navbar on small screens (Hidden on medium and large screens) -->
<div class="w3-top w3-hide-large w3-hide-medium">
<div class="w3-bar w3-black w3-opacity w3-hover-opacity-off w3-center w3-small" id="navItem1">
<a href="#" class="w3-bar-item w3-button" style="width:25% !important">HOME</a>
<a href="#about" class="w3-bar-item w3-button" style="width:25% !important">ABOUT</a>
<a href="#photos" class="w3-bar-item w3-button" style="width:25% !important">PHOTOS</a>
<a href="#contact" class="w3-bar-item w3-button" style="width:25% !important">CONTACT</a>
</div>
</div>
You need to save the cheerio output to a file after making changes to the cheerio document.
This example overwrites readManipulateFileName file with the new content from cheerio. If you don't want to overwrite you can put a different filename.
var addNavBarW3CSS = function(){
let readManipulateFileName = 'generated_web/'+fileNameChosen+'.html';
const $ = cheerio.load(fs.readFileSync(readManipulateFileName,'utf8'));
var navText="";
rl.question("Please enter Navigation Text: \n",function(answer) {
navText='<a href="#contact" class="w3-bar-item w3-button" style="width:25% !important">'+answer+'</a>';
$('#navItem1').append(navText);
console.log(navText+" succesfully appended to navigation");
createMobileWebPageSubmenu();
// once all the changes to $ are complete:
fs.writeFileSync(readManipulateFileName, $.html(), 'utf8');
});
}Based on How to put scraping content to html (Node.js, cheerio) and Writing to file after modifying with cheerio on node
Hi I've found an answer to my problem here is it and put it some comment in it.
var addNavBarW3CSS = function(){
let readManipulateFileName = 'generated_web/'+fileNameChosen+'.html';
const $ = cheerio.load(fs.readFileSync(readManipulateFileName,'utf8'));
var navText="";
rl.question("Please enter Navigation Text: \n",function(answer) {
navText='<a href="#contact" class="w3-bar-item w3-button" style="width:25% !important">'+answer+'</a>';
//to append new element
$('#navItem1').append(navText).html();
//to make the cheerio object whole HTML again
navHTML=$("*").html();
//to write to the HTML file again
fs.writeFileSync(readManipulateFileName, navHTML, 'utf8');
console.log(navHTML);
createMobileWebPageSubmenu();
});
'''