Why am I not able to add content to my html page?

Question

I found this interesting topic on reusing the navbar for multiple pages, and it works. The issue is when I add tags to my document like an h1 tag it does not show up.

Here is the code that loads the Navbar

<script>
$(function(){
  $("#nav-placeholder").load("nav.html");
});
</script>

Here is the index.html code

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
<!-- Nav loading starts -->
  <div id="nav-placeholder"></div>

<!-- Nav loading ends -->

<!-- Home/index page content starts -->
<h1> This is the home page</h1>
<!-- Home/index page content ends -->
<script>
$.get("nav.html", function(data){
    $("#nav-placeholder").replaceWith(data);
});
</script>
</body>

</html>

Here is the link to the original answer: How can I reuse a navigation bar on multiple pages?

Here is the Nav.html code

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap" rel="stylesheet" type="text/css">
  <link rel="stylesheet" type='text/css' href="nav.css">
</head>

<body>
  
  <div id="nav-bar">
  <nav>
    <input id="nav-toggle" type="checkbox">
    <div class="logo"><strong>BuddyUp</strong></div>

    <ul class="links">
      <li><a href="index.html">Home</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Tips</a></li>
      <li><a class="register" href="Login.html">Log in</a></li>
    </ul>
    
    <label for="nav-toggle" class="icon-burger">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </label>

  </nav>
</div>

</body>
</html>

Thanks

Update:

If I refresh the index page I can see it for a brief moment

Ok, thank you for your help. I will take another look at my code — , Feb 21 '21 at 22:09
I took another look, and It all seems to be closed. I can post the nav.html file — , Feb 21 '21 at 22:11

score 1 · Accepted Answer · answered Feb 21 '21 at 22:14

you have to keep just this for your navbar.html:

  <div id="nav-bar">
  <nav>
    <input id="nav-toggle" type="checkbox">
    <div class="logo"><strong>BuddyUp</strong></div>

    <ul class="links">
      <li><a href="index.html">Home</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Tips</a></li>
      <li><a class="register" href="Login.html">Log in</a></li>
    </ul>
    
    <label for="nav-toggle" class="icon-burger">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </label>

  </nav>
</div>

Alternately, OP could use `$("#nav-placeholder").load("nav.html #nav-bar")`. See [Loading Page Fragments](https://api.jquery.com/load/#loading-page-fragments) — Phil, Feb 21 '21 at 22:17

score 0 · Answer 2 · answered Feb 21 '21 at 21:59

0

You should do this with a different aproach. Your code is executed on the client side and can't read your nav.html file. You need to make a HTTP GET request to read your file and append it to the innerHTML. You can do this with jQuery.ajax() function. In my opinion you should use PHP for the task by using include('nav.html').

answered Feb 21 '21 at 21:59

gogibogi4

263
4
15

_"You need to make a HTTP GET request to read your file and append it to the innerHTML"_... that's exactly what OP is doing – Phil Feb 21 '21 at 22:01

Why am I not able to add content to my html page?

2 Answers2