Question

我最近开始学习jQuery并且遇到了一些问题。由于我来自C / C ++背景，jQuery的代码格式不熟悉。

所以，我的问题是.append（）似乎没有附加。我最近一直在编写一个脚本来在jQuery中创建一个弹出窗口，并且需要向body添加一个元素。没啥事儿。进一步测试后，.append（）似乎没有用。我的结论是我可能会误用它，但我不知道如何。

$('#contact').click(function (e) {
    $('#about').append('<h1>test</h1>');
    e.preventDefault();
});

编辑1：请求了Html

<!DOCTYPE html>
<html>
  <head>
    <title>Canteen Mate</title>
    <link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=Roboto">
    <link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=Roboto+Condensed">
    <link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=Ubuntu">
    <link rel="stylesheet" type="text/css" href="css/home.css">
  </head>
  <body>
    <div class = "nav_wrapper" id = "nav_wrapper">
      <nav>
        <ul>
          <li class = "current"><a href="#nav_wrapper" id = "Home" class =      "nav">Home</a></li>
          <li><a href="#about" id = "About" class = "nav">About</a></li>
          <li><a href="#contact" id = "Contact" class = "nav">Contact</a>    </li>
    </ul>
  </nav>
</div>
<div class = "wrapper">
  <img src="images/newfood.jpg" alt="Food" class="luncho">
  <div class = "text">
    <h1 class = "motto">Ordering from the canteen has never been so simple<br>
    <p class = "motto-description" id = "about">Order food from your canteen from
    anywhere as long as you have data.</p></h1>
  </div>
</div>

只包含了一些html以节省空间（我附加区域中的html）。 <script>元素位于底部。

Answer 1

您的HTML中的ID是大写的（Contact，而不是contact），但您在JavaScript中使用全部小写。也改变了jQuery选择器：

$('#Contact').click(function (e) {
    $('#About').append('<h1>test</h1>');
    e.preventDefault();
});

或者在HTML中使用小写：

<a href="#about" id="about" class="nav">About</a>
<a href="#contact" id="contact" class="nav">Contact</a>

Answer 2

$('#contact').click(function (e) {
    $('#about').append('<h1>test</h1>');
    e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="about">this is div "about".</div>
<div id="contact">click here to see some action</div>

Answer 3

您的代码似乎很好。确保您还有HTML格式的div。这是我用你的代码做的JSFiddle，它工作得很好。

https://jsfiddle.net/edtqpvym/

我用来测试的HTML

<span id="contact">Click me</span>
<div id="about">
</div>

编辑：你必须照顾大写和小写字母！在HTML中，您使用大写命名div ID，而在JQuery中，您使用小写命名它们。这解决了你的问题。最好使用小写字母命名div。而且你也不应该在=

之前使用空格

id = "Contact" class = "nav"

像这样写：

id="Contact" class="nav"

如果你坚持这个间距，你的代码可能会变得非常混乱。

如何正确使用.append（）

3 个答案: