How do I add a DOM element with jQuery?

Question

I have a funciton that I am currently using to show a hidden div.a_type

How can I modify this code so that instead of fading in the hidden div, I can add the new div to the DOM

jQuery(function(){   // Add Answer

    jQuery(".add_answer").click(function(){
      if(count >= "4"){
        alert('Only 4 Answers Allowed');
        }else{
      var count = $(this).attr("alt");
      count++;
      $(this).parents('div:first').find('.a_type_'+count+'').fadeIn();
      $(this).attr("alt", count);
    }

    }); 

});

Answer 1

How about adding it after the last div.

$('.a_type:last').insertAfter('<div class="a_type">content</div>');

edit
You can get the information through a AJAX call to somefile.php, somefile should then return the content you want in the div:

$.get('path/to/somefile.php', function(data){
 $('.a_type:last').insertAfter('<div class="a_type">' + data + '</div>');
});

Somefile.php should be something like this:

<?php
 session_start();
 $sessiondata = $_SESSION['data'];
 echo "Whatever you type here will come inside the div bla bla $sessiondata";
?>

edit
Okay, try this:

jQuery(function(){ // Add Answer

jQuery(".add_answer").click(function(){
  if(count >= "4"){
    alert('Only 4 Answers Allowed');
    }else{
  var count = $(this).attr("alt");
  count++;
  $('.a_type_'+count-1+'').insertAfter(' 
       Place content back here');
  $(this).attr("alt", count);
}

});

});

Just mix in the AJAX if you still nead it.

Answer 2

Here's what i have now, i'm getting a 'unterminated string literal' error, is something wrong with my syntax?

jQuery(function(){   // Add Answer

    jQuery(".add_answer").click(function(){
      if(count >= "4"){
        alert('Only 4 Answers Allowed');
        }else{
      var count = $(this).attr("alt");
      count++;
      $('.a_type_'+count+'').after('<div class="a_type_'+count+'"> 
      <label for="a" class="reg">Answer 3</label>
      <a class="destroy_answer"><img src="images/x.gif" /></a>
    <input class="large_input" type="text" name="a[]" value="" size="30" />
    <select class="large_input" name="p[]">
      <option value="">Select Personality</option>
    </select>
    </div>');
      $(this).attr("alt", count);
    }

    }); 

});

Answer 3

Ok, now that i have this sorted out, i have one more question,

I have another function that removes the inserted div's if a button is clicked. It's not working now that the additional divs are not loaded into the dom on pageload. How can i trigger the function to remove these now?

jQuery(function(){ // Hide Answer

jQuery(".destroy_answer").click(function(){
  $(this).parents("div:first").fadeOut(function (){ $(this).remove() });
   var count = $(this).parents('div:first').parents('div:first').find('.add_answer').attr("alt");
   count--;
   $(this).parents('div:first').parents('div:first').find('.add_answer').attr("alt", count);

});

});

Answer 4

I have another function that removes the inserted div's if a button is clicked. It's not working now that the additional divs are not loaded into the dom on pageload. How can i trigger the function to remove these now?

You have three options to solve your most recent problem.

1. You could use liveQuery, a jQuery plugin which re-applies event handlers to DOM elements when they are added. Note: this plugin will only be effective if you're using native jQuery DOM appending/prepending functions (append/prepend/after/before/insertBefore/insertAfter etc.).

2. Alternatively you could simply re-apply the handlers when new elements are added, manually... (not the best option)

3. The third, and in my opinion the best option is to utilise the awesome power of event delegation. What you do is attach an event handler to any parent, for example if you're going to be dynamically adding list-items to an unordered list, instead of continually re-applying event handlers to each added item you could simply attach the event handler to the parent and then find the target of the event:

   $('ul').click(function(e){
       var target = e ? e.target : window.event.srcElement;
       if(target.nodeName.toLowerCase() === 'li') {
           // Do Stuff...
       }
   })