如何更正此jQuery附加

Question

在另一个问题中，有人让我转向了这种编写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来使其工作，但这听起来像一种更清洁的方法。

Answer 1

当然，您缺少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 } )));

通过

$("<li/>", { className: "story" })
   .append($("<span/>", { "class": "story-count" }))
   .append($("<span/>", { "class": "story-title-input", text: title } ));

Answer 2

此代码无效：

, className: 'story'

您可能正在寻找的是对象文字，请尝试将参数包装到{} $('...')中，如下所示：

$(".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})));
});

Answer 3

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

$('.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) );
});

您需要将对象用于elements属性