jQuery - 如何动态地将列表项添加到无序列表?

时间:2010-08-10 04:41:03

标签: jquery html dom jquery-selectors html-lists

似乎是一件简单的事情(尽管我仍在学习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功能在这里使用不正确吗?

3 个答案:

答案 0 :(得分:5)

您希望.appendTo(...)使用此样式。

$("<li/>").appendTo("#fbsignup .message ul").html("Fields marked with * are required.");​

Try it.

答案 1 :(得分:0)

我的问题似乎是你正在使用一个名为.add() 的函数,我认为没有这样的函数 -wrong。
可能你可以使用.append()来做你的遗嘱http://api.jquery.com/?ns0=1&s=append =)

对我来说,一个好的一般规则就是事先在Firebug控制台上尝试一些东西(通过FireFox)

答案 2 :(得分:0)

尝试

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