Question

i am having a HTML like

<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>

on CLicking of this add i am adding choices like using JQUery
as

  $(".addChoice").live("click", function(){

                //alert($(".fieldChoices input").length);
                var length=$(".fieldChoices input").length;
                length++;

                $("<input id='Choice"+length+"' maxlength='150' value=option"+length+">").appendTo(".fieldChoices");

                $("<div class='seperator'/>").appendTo(".fieldChoices");    

                $("<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>").appendTo(".fieldChoices");
                            $("<div class='seperator'/>").appendTo(".fieldChoices");

                return false;
            });

when i did this it genrates the input element with the option3 ,…
But all these are appending to the end of the .fieldChoices..
But i am trying to make this appear in this .fieldChoices but before Add

tag ..

How to append so in JQuery??

Answer 1

You can chain it together as a single string and use jQuery’s before method to insert the HTML before the .addChoice element:

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