为什么我不能将内容添加到我的html页面？_Html_Jquery

为什么我不能将内容添加到我的html页面？

html jquery

为什么我不能将内容添加到我的html页面？,html,jquery,Html,Jquery,我发现了一个有趣的话题，关于在多个页面上重用导航栏，它很管用。问题是，当我向文档中添加标记（如h1标记）时，它不会显示下面是加载导航栏的代码 <script> $(function(){ $("#nav-placeholder").load("nav.html"); }); </script> $（函数（）{ $（“#导航占位符”）.load（“nav.html”）； }); 下面是index.html代码 <!D

我发现了一个有趣的话题，关于在多个页面上重用导航栏，它很管用。问题是，当我向文档中添加标记（如h1标记）时，它不会显示

下面是加载导航栏的代码

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


$（函数（）{
$（“#导航占位符”）.load（“nav.html”）；
});

下面是index.html代码

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

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


这是主页
$.get（“nav.html”，函数（数据）{
$（“#导航占位符”）。替换为（数据）；
});

以下是原始答案的链接：

下面是Nav.html代码

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

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


BuddyUp

谢谢

更新：

如果我刷新索引页面，我可以短暂地看到它

您应该使用不同的方法来完成此操作。您的代码在客户端执行，无法读取nav.html文件。您需要发出HTTP GET请求来读取文件并将其附加到innerHTML。您可以使用

jQuery.ajax（）

函数来实现这一点。在我看来，您应该通过使用

include（'nav.html'）

将PHP用于任务，您必须为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>


BuddyUp

没有html代码很难帮助您好的，您需要哪种html代码？您将标记h1放在何处以及您加载navbarI的位置我将html代码与您的示例一起添加到何处没有问题，h1存在“您需要发出HTTP GET请求来读取您的文件并将其附加到innerHTML”。。。这正是OP正在做的。另外，OP可以使用

$（“#导航占位符”）.load（“nav.html#导航栏”）

。看见