Codecademy jQuery 停留在“修改 HTML 元素”上答案

【问题标题】：Codecademy jQuery stuck on "Modifying HTML Elements"Codecademy jQuery 停留在“修改 HTML 元素”上
【发布时间】：2015-04-19 23:07:07
【问题描述】：

我们正在制作待办事项清单

这里是说明：

完美！现在我们想将我们的 HTML 元素添加到文档中。我们可以使用方便的 .append() 函数来做到这一点。让我们继续使用 .list 类附加到我们的 div 中。我们将附加带有 class="item" 的 a，因为我们需要一种方法来定位我们附加的 s，当我们稍后删除它们时。（如果我们不能检查它，那么“待办事项”列表就不好了。）我们希望 div 的内容是我们输入字段的内容，我们将其保存在变量 toAdd 中。这意味着当我们追加时，我们会想要追加：

'<div class="item">' + toAdd + '</div>'

继续，将带有 class="item" 的 .append() a 添加到 HTML 文档的 .list div 中，然后确保单击按钮以添加项目 - 练习将等待您这样做！

我不明白需要做什么。

我试过了：

$(document).ready(function() {
$("button").click(function () {
   var toAdd = $("input[name=checkListItem]").val();
   $(".list").append("div class='item'" + toAdd + "div");
});});

但是当我输入任何内容并单击按钮时它不起作用。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

关闭！试试这个：

$(document).ready(function() {
    $("#button").click(function() {
       var toAdd = $("input[name=checkListItem]").val();
       $(".list").append("<div class='item'>" + toAdd + "</div>");
    });
});

您的 append() 中没有 HTML 尖括号。此外，$("button") 应该是 $("#button")，因为它是 ID“按钮”，而不是真正的 <button>。

【讨论】：

当我输入内容并单击“添加”时，仍然没有任何反应。 Codecademy 说“糟糕，再试一次。看起来你没有将新的
附加到你的 .list 中。” i.imgur.com/2LEs6LD.jpg
你能粘贴你的列表 div 的 HTML 吗？
Codecademy 为我制作了 HTML，我只是在编写脚本.. 无论如何：<!DOCTYPE html> <html> <head> <title>To Do</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> <script type="text/javascript" src="script.js"></script> </head> <body> <h2>To Do</h2> <form name="checkListForm"> <input type="text" name="checkListItem"/> </form> <div id="button">Add!</div> <br/> <div class="list"></div> </body> </html>
将按钮更改为#button
就是这样！我多么愚蠢。 :D 谢谢。

【解决方案2】：

$(".list").append("div class='item'" + toAdd + "div");

应该是：

$(".list").append("<div class='item'>" + toAdd + "</div>");

或

$(".list").append($('<div>').addClass('item').text(toAdd));

【讨论】：