append HTML elements inside a specific div using Cheerio-CodePudding

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"  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 >
  <div  id="navItem1">
    <a href="#"  style="width:25% !important">HOME</a>
    <a href="#about"  style="width:25% !important">ABOUT</a>
    <a href="#photos"  style="width:25% !important">PHOTOS</a>
    <a href="#contact"  style="width:25% !important">CONTACT</a>
  </div>
</div>

CodePudding user response：

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"  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

CodePudding user response：

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