How can I load a separate html page into my main index.html? I imagine it can be done by selecting an element id with jquery

Question

Right now I am planning on using this on every page, but it is not loading the nav and I'm not sure why.

<!-- This is in my main HTML that I want nav in-->
    <div id="nav-placeholder"></div>
    
    <script>
    $(function(){
      $("#nav-placeholder").load("NavBar.html");
    });
    </script>

<!-- this is the NavBar.html file-->
<header>
<div class="header-row">
            <div class="header-column d-lg-none">
                <div class="header-row">
                    <h1 class="font-weight-semibold text-7 mb-0">
                        <a href="index.html" class="
              text-decoration-none text-color-light
              custom-primary-font
            ">Dynamic</a>
                    </h1>
                </div>
            </div>
</div>
</header>

Answer 1

it's not a terrible practice, depending on what components you are going to use inside this method. Eg, Navbars and footers, no problem.

Have a look on this question: How to separate html text file into multiple files?