Question

我正在尝试创建自己的待办事项列表应用程序，但第一步甚至没有工作！这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>To-Do List</title>
        <script type='text/javascript' src='script.js'></script>

    <!--JAVASCRIPT-->
    <script>
     </script>

        <script src="jquery.js"></script>

        <!--JQUERY--> 
<script>

$(function() {
  $("#new").click(function() {
     $("html").append("<div><form> Category Name: <input type = \"text\">")
    });
});

</script>
</head>

   <!--USER INTERFACE-->
   <div>
   <p id = "new">New Category</p>
   </div>

   <div><p>Customize</p></div>

   <div><p>Save this list</p></div>


    </body>
</html>

当我在Notepad ++（Chrome的最新版本）中打开应用程序时，单击“新类别”时没有任何反应。有什么帮助吗？

Answer 1

您将div追加到html元素：

$("html").append("<div><form> Category Name: <input type = \"text\">")

您应将其放在body或以下，而不是html元素中。

$("body").append("<div><form> Category Name: <input type = \"text\">")

虽然某些浏览器仍可显示div，但您创建的结构无效。坚持一个有效的可能是最好的。

（请注意，通过DOM创建此文件与使用该内容实际编写HTML文件完全不同。序列化 HTML中有"optional" tags - 例如来自文件或URL的文件 - 但这与通过DOM构建无效结构不同。）

在你要追加的片段中包含结束标记也是一个好主意：

$("body").append("<div><form> Category Name: <input type = \"text\"></form></div>")
// Here ------------------------------------------------------------^^^^^^^^^^^^^

...虽然在我的实验中jQuery并不关心。

Answer 2

您必须在<body>之后添加</head>标记。它正在发挥作用。

Answer 3

您的项目文件夹中是否有本地jquery？您的相对脚本路径表示如此。我在jsfiddle中创建了你的东西（包括jquery），它按预期工作：http://jsfiddle.net/3qjFg/

<强> HTML

<div>
  <a href="#" id="new">New Category</a>
</div>

<div>
  <p>Customize</p>
</div>

<div>
  <p>Save this list</p>
</div>

<强>的jQuery

$(function() {
  $("#new").on("click", function(event){
    event.preventDefault();
    $("body").append("<div><form> Category Name: <input type = \"text\">");
  });
});

.append在Notepad ++中不起作用

3 个答案: