Javascript 如何更正此jquery追加

在另一个问题中，有人向我介绍了这种编写jQuery.append的方法，但我似乎无法让它工作。控制台返回一个错误，是一个意外的字符串，但我无法找出我做错了什么

不工作：

$(".create-form").submit(function(event){
    var title = $("#story-name").val();
    copy = $("#story-content").val();
    $(".storyboard").append(
        $("<li/>", className: "story").html(
            $("<span/>", className: "story-count") +
            $("<span/>", className: "story-title-input", content: title)));
});

我还尝试用逗号代替第一个附加元素上的+和.append而不是.html。我可以通过写出所有html来让它工作，但这感觉像是一个更干净的方法。

可以肯定，json初始化缺少{和}

$(".create-form").submit(function(event){
    var title = $("#story-name").val();
    copy = $("#story-content").val();
    $(".storyboard").append(
        $("<li/>", { className: "story" }).html(
            $("<span/>", { className: "story-count" }) +
            $("<span/>", { className: "story-title-input", content: title } )));
});

然后我会替换这个

$("<li/>", { className: "story" }).html(
   $("<span/>", { className: "story-count" }) +
   $("<span/>", { className: "story-title-input", content: title } )));

借

确保json初始化缺少{和}

$(".create-form").submit(function(event){
    var title = $("#story-name").val();
    copy = $("#story-content").val();
    $(".storyboard").append(
        $("<li/>", { className: "story" }).html(
            $("<span/>", { className: "story-count" }) +
            $("<span/>", { className: "story-title-input", content: title } )));
});

然后我会替换这个

$("<li/>", { className: "story" }).html(
   $("<span/>", { className: "story-count" }) +
   $("<span/>", { className: "story-title-input", content: title } )));

借

此代码无效：

, className: 'story'

您可能要查找的是对象文字，请尝试将参数包装为{}中的$'…'，如下所示：

此代码无效：

, className: 'story'

您可能要查找的是对象文字，请尝试将参数包装为{}中的$'…'，如下所示：

---

我认为这更具可读性，也是一种更好的方法：

$('.create-form').on('submit', function(e){
    e.preventDefault();
    var title = $('#story-name').val(),
        copy  = $("#story-content").val(),
        li    = $('<li />',   {'class': 'story'}),
        span1 = $('<span />', {'class': 'story-count'}),
        span2 = $('<span />', {'class': 'story-title-input', text: title});

    $(".storyboard").append( li.append(span1, span2) );
});

---

您需要将对象用于元素属性

我认为这更具可读性，而且是一种更好的方法：

$('.create-form').on('submit', function(e){
    e.preventDefault();
    var title = $('#story-name').val(),
        copy  = $("#story-content").val(),
        li    = $('<li />',   {'class': 'story'}),
        span1 = $('<span />', {'class': 'story-count'}),
        span2 = $('<span />', {'class': 'story-title-input', text: title});

    $(".storyboard").append( li.append(span1, span2) );
});

---

您将需要为元素属性使用对象

我首先使用了此方法，但我决定不再使用它们，因此我认为没有必要将它们设置为变量。当然，如果我要重用这些，我会使用这种方法。你说这是因为观点还是因为标准？无意冒犯，我只是认真地问一下，因为我现在正在学习js。我承认我确实经常看到你的方法，我在尝试这种新方法之前就已经使用过了。谢谢你的帮助。我想这是一个意见问题。我当然修复了所有的错误，我想知道是否有其他人会注意到内容和类名属性：……我当然没有注意到……哈哈。我想你注意到我对其他答案的评论了。我只注意到它没有呈现任何文本，并且看到它添加了一个content属性和className属性，这两个属性我都不想要。我之所以保留className，是因为在另一个问题中，有人认为className是jQueryAPI，是应该做的事情。我想他们在这件事上错了。我应该知道，因为我从jQuery网站上的文档中了解到，它基本上会接受这些参数并通过.attr运行它们。唉，直到后来我才这么做。我确实先使用了这个方法，但我决定不需要再使用它们，所以在我看来，将它们设置为vars是没有必要的。当然，如果我要重用这些，我会使用这种方法。你说这是因为观点还是因为标准？无意冒犯，我只是认真地问一下，因为我现在正在学习js。我承认我确实经常看到你的方法，我在尝试这种新方法之前就已经使用过了。谢谢你的帮助。我想这是一个意见问题。我当然修复了所有的错误，我想知道是否有其他人会注意到内容和类名属性：……我当然没有注意到……哈哈。我想你注意到我对其他答案的评论了。我只注意到它没有呈现任何文本，并且看到它添加了一个content属性和className属性，这两个属性我都不想要。我之所以保留className，是因为在另一个问题中，有人认为className是jQueryAPI，是应该做的事情。我想他们在这件事上错了。我应该知道，因为我从jQuery网站上的文档中了解到，它基本上会接受这些参数并通过.attr运行它们。唉，直到后来我才这么做。好吧，我还没有尝试过你的最后一个方法，但在我第一次尝试时，我用大括号包装了属性。这似乎没有帮助。所以，也许这是最后一部分，它将把它全部打包在一起。最初，我在剥离它之前有很多元素，它看起来像：$cont.append$，{className:story，id:s-+index++}.append$，{className:new item}.append$，{href:，className:launch task，content:Create a task}$，{type:text，className:new item title，value:something}$，{className:drops waiting}。追加$div/>，{className:drops working}。追加$div/>，{className:drops finished}；因此，其中一个可能存在其他错误，导致其不正确。但无论如何，我将尝试您的建议。感谢您的帮助。因此，您的方法起了作用。我遗漏了一些其他内容，例如className，尽管我看到的前一个示例中有它，但它似乎不正确。它创建了className属性，这当然不起作用。我还需要。最后一个跨距上的文本内容：title再次强调，内容不是我需要的属性。谢谢你的帮助。好的，我还没有尝试你的上一个方法，但在我第一次尝试时，我用大括号包装属性。这似乎没有帮助。因此，可能是最后一个部分将其包装在一起。最初，我有更多的元素在我把它拆下来之前，它看起来像：$co

---

nt.append$，{className:story，id:s-+index++}.append$，{className:new item}.append$，{href:，className:launch task，content:Create a task}$，{type:text，className:new item title，value:something}$，{className:drops waiting}.append$div/>，{className:drops working}.append$div，{className:drops finished}；因此，其中一个可能存在其他错误，导致其不正确。但无论如何，我将尝试您的建议。感谢您的帮助。因此，您的方法起了作用。我遗漏了一些其他内容，例如className，尽管我看到的前一个示例中有它，但它似乎不正确。它创建了className属性，这当然不起作用。我还需要。最后一个跨距上的文本，内容：title，再次强调，内容不是我需要的属性。谢谢你的帮助。你的方法正在工作。但是，返回的结果不是我所期望的。我现在得到的是[object object][object]结果，然后它闪烁，然后消失…但它正在尝试将它附加到正确的位置，至少看起来是有效的。我在上面的代码中有一些错误，因此我认为这就是导致最新错误的原因。它现在已修复。您的方法正在工作。但是，返回的结果不是我预期的。我现在得到了一些信息结果是[object object][object object]然后闪烁，然后消失……但它试图将其附加到正确的位置，至少看起来是有效的。我在上面的代码中有一些错误，因此我认为这就是导致最近错误的原因。现在已修复。