Solution 1 :

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

Solution 2 :

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

Problem :

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>

Comments

Comment posted by James

Are you expecting the contents of

Comment posted by Putera Syabil

Im trying to write on $(‘#navItem1’).append(navText);. Because Im trying to refer to specific div element. Is there any other method you can recommend? @James

Comment posted by James

Yeah but that just updates the in-memory document, it doesn’t convert it to html and write it to a file. If that’s what you are trying to do (?)

Comment posted by Putera Syabil

@James How do I write it to the HTML file, since I need to point to a specific div? I have figured out how to convert by using

Comment posted by Putera Syabil

Hi thanks for the tips really appreciate it man, I’ve found the solution and post it in the answer.

By