I have this folder structure:

A
|_B
| |_C
| | |_D

I have my navbar.html, style.css, and main.js (for the navbar) in folder A.

This is the code block I use to add the navbar in my index.html, and it works with other html files within folder A

<div id="nav-placeholder"></div>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
    $.get("navigation.html", function(data){
        $("#nav-placeholder").replaceWith(data);
    });
</script>

I have a html file in folder D that I wanted to add a navbar to. So I just changed the path to ../../../navigation.html This is the code block:

<div id="nav-placeholder"></div>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
    $.get("../../../navigation.html", function(data){
        $("#nav-placeholder").replaceWith(data);
    });
</script>

It did add the navbar html file, but not the css and js for it.

I used tabnine and it told me to change the code block to “add the files separately” and nothing changed. I also tried putting the specific path but it didn’t work either.

Tabnines solution:

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
    $.get("../../../navigation.html", function(data){
        $("#nav-placeholder").replaceWith(data);

        // Add the following lines to include the CSS and JavaScript files
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = '../../../style.css';
        document.getElementsByTagName('head')[0].appendChild(link);
                        
        var script = document.createElement('script');
        script.src = '../../../main.js';
        document.getElementsByTagName('body')[0].appendChild(script);
     });
</script>