1

I am new to jQuery and fiddling around with trying to add new elements to the DOM after a new node has been inserted into the DOM.

Let's say I have a poll. After the user votes, a new div with a class of .voted is inserted into the div that contained the poll. If I had a hidden div that I wanted to insert and show only when this new div has been added to the DOM, would this be possible?

I've been doing research on the jQuery site and so far, the closest I came up with was something like this:

$('.hidden-div').livequery(function() {
    appendTo('.voted');
});

I tried this on my site, but as expected, it didn't work. Is there a way to achieve this using jQuery?

Edit: Here is a simplified version of the markup:

Before user has voted:

<div id="poll">
    (poll here)
</div>
<div id="hidden-div" style="display:none">content</div>

After user has voted:

<div id="poll">
    <div class="voted">
        (some content here)                             <-- in here----------| 
    </div>                                                                   |
</div>                                                                       |
<div id="hidden-div" style="display:none">content</div> <-- I want this div..|
J82
  • 8,267
  • 23
  • 58
  • 87
  • So you are inserting two new divs? Or does the `hidden-div` already exist? Please provide all relevant code including markup. – Chris Pickford Sep 09 '14 at 14:29
  • Plz, post [fiddle](http://jsfiddle.net/) with all the Html,javascript and css. – Darshan Patel Sep 09 '14 at 14:36
  • @Chris Actually, only one new div (`.voted`) which will be added by the poll plugin. (`.hidden-div`) already exists. I inserted a simplified version of my markup to give you a better idea. – J82 Sep 09 '14 at 14:40
  • Is `.voted` dynamically created? If so you will have to use `.on` as trigger – Dan Sep 09 '14 at 15:14
  • @Dan Yes, `.voted` is dynamically created. Can you elaborate on how I should use `.on`? I'm only familiar with using it for `click` events and am unsure how to apply it in this situation. – J82 Sep 09 '14 at 22:21
  • Take a look at this: http://stackoverflow.com/questions/20819501/jquery-click-event-not-working-for-dynamically-created-button – Dan Sep 09 '14 at 22:25
  • @Dan Ok, I looked through that link. Basically, I have a poll with a vote button. When the user chooses a radio button and clicks the vote button which has a class of `.Buttons`, a new div is dynamically created with the `.voted` class. So, what I did was this: `$(document).on('click', '.Buttons', function() { $('.hidden-div').appendTo('.voted'); });`. However, nothing has changed in the DOM. Do you see anything that might be off? – J82 Sep 09 '14 at 22:32

1 Answers1

0

You can use append():

var html = '<div id="hidden-div">content</div>';
$('.append').click(function() {
    $('.voted').append(html);
});

I changed the trigger to a click for demo purposes - but the trigger can be whatever you need it to be. The content will be placed within the voted div.

JS Fiddle Demo

Note that this will continually append the html on click. To block it from being appended multiple times, use .length which counts number of elements present on the page: 

$('.append').click(function() {
    if($('#hidden-div').length == 0 ){
        $('.voted').append(html);
    }
});
Dan
  • 9,391
  • 5
  • 41
  • 73
  • Hey Dan, I tried your code, but the div didn't get appended. Strange. I'll try to play around with it. – J82 Sep 09 '14 at 14:58
  • It does get appended, but its hidden so nothing shows on the page. I was using your example w/ `display:none` – Dan Sep 09 '14 at 14:58
  • See updated example without `display:none`: http://jsfiddle.net/0711fz2f/1/ Note that this will append multiple times if user clicks multiple times – Dan Sep 09 '14 at 14:59
  • Yeah, I can see it working in your fiddle which is why I thought it was strange that it didn't work on my end. I checked in my markup and the div still remained in the same place. – J82 Sep 09 '14 at 15:01