Question

我是JQuery的新手。我想使用JQuery来实现一个可以获取输入内容并将内容放入列表的函数。现在我遇到了一个问题：这是HTML代码的一部分。

    <body>
        <form name="checkListForm">
            <input type="text" name="checkListItem"/>
        </form>
        <div id="button">Add!</div>
        <br/>
        <div class="list"></div>
    </body>

这是JQuery代码：

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

我正在努力实现这一点：当我输入内容并点击按钮时，内容将存储在toAdd中，并且包含class="item"和toAdd内容的新div将会被列入清单。我知道还有另一种正确的方法来实现这个目标：

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

所以我想知道为什么我的代码在这里不起作用？

Answer 1

更正.val的拼写错误，方法不是属性因此添加()(parenthesis)
$('<div>')将创建空jQuery元素

div

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

.item {
  border: 2px solid black;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form name="checkListForm">
  <input type="text" name="checkListItem" />
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>

可以在JQuery中使用.append（）中的方法吗？

1 个答案: