jQuery - 如何动态地向无序列表添加列表项？

Question

看起来很简单（虽然我仍在学习jQuery的各个方面）。

这是我的HTML：

<div id="fbsignup">
    <div class="message messageerror"> 
       <strong>There were errors with your registration:</strong> 
          <ul></ul> 
    </div> 
</div>

这是我（尝试的）jQuery代码：

// Check Required Fields.
$('#fbsignup input.required').each(function () {
   if ($(this).val().trim() == '') {
      $(this).next('em').html('*').show();
      $('#fbsignup .message ul').add('li').html('Fields marked with * are required.');
    }
});

这是它对DOM所做的操作：

<div class="message messageerror"> 
   <strong>There were errors with your registration:</strong> 
      <ul>Fields marked with * are required.</ul> 
</div> 

这是将文本添加到内部html中。我希望它添加一个<li>元素，其内部html为我设置的内容 - 我认为这就是链式操作的工作原理？

这是我最终想要的HTML：

<div class="message messageerror"> 
   <strong>There were errors with your registration:</strong> 
      <ul>
         <li>Fields marked with * are required.</li> 
      </ul>
</div>

我也尝试了这个方法：

$('#fbsignup .message ul').add('<li>Fields marked with * are required.</li>');

这个操作完全没有任何作用。

我错过了什么吗？.add函数不是在这里使用的正确方法吗？

- RPM1984

Answer 1

您需要使用.appendTo(...)实现此样式。

$("<li/>").appendTo("#fbsignup .message ul").html("带*号的字段为必填项。");​

试一试。

- Strelok

---

很好。我喜欢这个更好，因为你可以链接选择器（.html）。谢谢。 - RPM1984

Answer 2

对我来说问题似乎是你正在使用一个名为 .add() 的函数，我不认为有这样的函数 - 错误。
很可能你可以使用 .append() 来实现你的意愿 http://api.jquery.com/?ns0=1&s=append =)

对我来说一个好的通用规则是在 Firebug 控制台上（在 FireFox 上）先尝试一些东西。

- Fabiano Soriani

---

".add肯定是一个函数（http://api.jquery.com/add/）。我也尝试了append，它做的事情相同（添加HTML，而不是带有HTML的元素）" - RPM1984

好的 - 用 .append('<li>foo</li>') 已经可以工作了。遗憾的是参数只是内容而不是实际的 DOM 元素（例如 .append('li').html('foo')）。总之，一切都很好。谢谢。 - RPM1984

哈哈，我真丢人。.add是一个函数，只是API搜索没有指出来而已 :P - Fabiano Soriani

Answer 3

尝试

$('#fbsignup .message ul li').add

- hameed

---

选择器不会返回任何内容，因为还没有 li 元素（这正是重点所在）。 - RPM1984