JQuery中的追加

我有一个类似HTML的

<p style="" class="fieldChoices title">Choices:
   <input value="option1" maxlength="150" id="Choice1"/>
   <div class="seperator"/>
   <p class="deleteChoice1 cutsom_button">
   <a class="btn lbOn deletechoice" href="#">
   <span class="button_image"><span class="background_16 user_reply">Delete</span>        
   </span>
   </a></p>
   <div class="seperator"/>
   <input value="option2" maxlength="150" id="Choice2"/>
   <div class="seperator"/>
   <p class="deleteChoice2 cutsom_button">
       <a class="btn lbOn deletechoice" href="#">
       <span class="button_image">
       <span class="background_16 user_reply">Delete</span>
      </span>
      </a></p>
  <div class="seperator"/>
  <p class="addChoice cutsom_button">
  <a class="btn lbOn addchoice" href="#">
  <span class="button_image">
  <span class="background_16 user_reply">Add</span>
 </span>
 </a>
 </p>
</p>

选项：

单击这个add，我添加了一些选项，比如使用JQUery 作为

$（“.addChoice”）.live（“单击”，函数（）{
//警报（$（“.fieldChoices输入”）.length）；
变量长度=$（“.fieldChoices输入”）.length；
长度++；
$（“”）.appendTo（“.fieldChoices”）；
$（“”）.appendTo（“.fieldChoices”）；
$（“

$（'.addChoice'）.live（'click'，function（））{
变量长度=$（'.fieldChoices输入'）。长度+1；
$（这个）。之前(
'' +
'' +
“
'+
''
);
返回false；
});

但这会使事情以错误的顺序出现在他的案例中，因为他每单击一次就要添加4个附件。不过，如果所有html都先放在一个字符串中，然后再加上前缀，那么使用prependTo将是一个更好的选择。（这实际上是最好的方法（减少DOM交互））即使在选择器中同时调用它们，也会将它们按错误的顺序排列？不，只有在一个接一个地调用它们的情况下。因为第二个放在第一个之前，第三个放在第二个之前，依此类推。但是用链子拴住他们可以解决问题。哦，我明白你的意思了。如果他们多次单击“添加”，它将出现在第一个按钮的顶部。。。我个人会让它从一个默认选项开始，然后让它跟随（）元素中的最后一个选项（或者如果它们位于最底部，则附加到元素）。我认为我们的想法之间的区别是prependTo会在目标元素中添加新元素，所以如果他从`

“>`使用prependTo（blah

），他最终会得到：

blah
，但在使用prependTo之前，他会得到：
blah

 $('.addChoice').live('click', function(){
 var length=$('.fieldChoices input').length + 1;
 $(this).before(
  '<input id="Choice' + length + '" maxlength="150" value="option' + length + '" />' +
  '<div class="seperator" />' +
  '<p class="deleteChoice' + length + ' cutsom_button"><a href="#" class="btn lbOn deletechoice"><span class="button_image"><span class="background_16 user_reply">Delete</span></span></a></p>' +
  '<div class="seperator" />'
 );
 return false;
});