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);
    }

    }); 

});

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

});

});

Quick note, while you can print HTML you can not print PHP through javascript since PHP is a preprocessor. — Ólafur Waage, Dec 27 '08 at 22:37
Good to know...how would you suggest that I print php session data in my select i'm trying to print? — adam, Dec 27 '08 at 22:40
Get the php session data using AJAX (jQuery has AJAX tools, I'll update my anser to use them. — Pim Jager, Dec 27 '08 at 22:41

score 10 · Accepted Answer · edited Mar 10 '11 at 23:55

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 need it.

insertAfter didn't work so i tried 'after' instead as you suggested earlier and it worked. Thanks — adam, Dec 27 '08 at 23:19
hm ok, weird, I though it was insertAfter, but oens't really matter, If this is the anser you use then you should accept it. — Pim Jager, Dec 27 '08 at 23:44

score 2 · Answer 2 · answered Dec 27 '08 at 23:44

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.

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.).
Alternatively you could simply re-apply the handlers when new elements are added, manually... (not the best option)
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...
    }
})
```

How do I add a DOM element with jQuery?

2 Answers2

Linked

Related