Append inside append

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
wasir
Forum Commoner
Posts: 49
Joined: Sun Jul 08, 2007 11:28 pm

Append inside append

Post by wasir »

I've got a div (mainDiv) that gets appended with a click of button. This 'mainDiv' consists of another div (insideDiv) that needs to be appended inside the 'mainDiv'. In other words, I am trying to append a div which is inside already appended div.

Hope I am clear.

Definitely I am doing something wrong that it's not working. Will much appreciate to know what am I doing wrong here.

HTML form:

Code: Select all

<div class="mainDiv">
      <div class="insideDiv">
            Inspected Level
            <select name="locationId[]">
                   // using php code here to get the option values
            </select>
            <input type="button" class="addInsideDiv" value="+" />
      </div>
      <input type="button" id="addMainDiv" value="[ Add ]" />
</div>
jQuery to add INSIDE DIV:

Code: Select all

$(".addInsideDiv").click(function() {
      $(".insideDiv").append(
            "<div>Inspected Level "
                  +"<select name=\"locationId[]\">"
                        // using php code here to get the option values
                  +"</select> "
                  +"<input type=\"button\" class=\"removeThis\" value=\"-\" />"
            +"</div>"
      );
});
jQuery to add MAIN DIV:

Code: Select all

$("#addMainDiv").click(function() {
      $(".mainDiv").append(
            "<div>"
                  +"<button class=\"removeThis\">X</button>"
                  +"<div class=\"insideDiv\">"
                        +"Inspected Level "
                        +"<select name=\"locationId[]\">"
                              // using php code here to get the option values
                        +"</select>"
                        +"<input type=\"button\" class=\"addInsideDiv\" value=\"+\" />"
                  +"</div>"
            +"</div>"
      );
});
jQuery to remove div:

Code: Select all

$('.removeThis').live('click', function() {
      $(this).parent().remove();
      return false;
});
Post Reply