如何正确使用 .append()答案

【问题标题】：How to properly use .append()如何正确使用 .append()
【发布时间】：2016-08-12 17:40:43
【问题描述】：

我最近开始学习 jQuery，但遇到了一些问题。由于我是C/C++背景，所以对jQuery的代码格式不熟悉。

所以，我的问题是 .append() 似乎根本没有附加。我最近一直在编写一个在 jQuery 中制作弹出窗口的脚本，并且需要将一个元素附加到正文。没啥事儿。经过进一步测试 .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> 元素位于底部。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

或者在 HTML 中将 ids 设为小写：

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

【讨论】：

这似乎是一个至关重要的问题，很好发现
啊，非常感谢！我看了href，因为我是个白痴。一定忘了我的咖啡！谢谢@eisbehr
抱歉，您犯了一个错误，现在投反对票。问题是你的，我让你看到代码有效。
堆栈溢出不是学习资源@Laurianti 吗？不需要消极。
@JamesBalajan 如果这个答案解决了你的问题，我建议你 accept it 向社区展示。

【解决方案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>

【讨论】：

因为stating that you cannot reproduce the problem described in the question is not an answer.
虽然这段代码 sn-p 可以解决问题，including an explanation 确实有助于提高您的帖子质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性 cmets 挤满你的代码，因为这会降低代码和解释的可读性！

【解决方案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"

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

【讨论】：