使用 Cheerio 在特定的 div 中追加 HTML 元素

Question

我正在尝试使用 cheerio 将 HTML 文本附加到 HTML 文件。专门添加一个导航栏。但是，每当调用该函数时，我打开 HTML 文件以查看是否附加了导航栏，但什么也没有。有人可以帮忙吗？

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

我试图追加的不同文件中的 div 元素。基本上是导航栏文件


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

Answer 1

您需要在更改 cheerio 文档后将 cheerio 输出保存到文件中。

此示例使用来自 cheerio 的新内容覆盖 readManipulateFileName 文件。如果您不想覆盖，您可以输入不同的文件名。

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

基于How to put scraping content to html (Node.js, cheerio) 和

Answer 2

您好，我在这里找到了我的问题的答案，并在其中添加了一些评论。

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

使用 Cheerio 在特定的 div 中追加 HTML 元素

append HTML elements inside a specific div using Cheerio

html

javascript

node.js

cheerio