jQuery - How to dynamically add an element to the DOM?

I output several textareas to a page. The textareas have a cl开发者_如何学Cass of "Expandable". I used to output a div right after each of those Expandable textareas in my HTML code.

Hardcoded:

<textarea id="NewContent" class="Expandable"></textarea>
<div class="Count"></div>

I want to change that so that jQuery goes through and finds each Expandable textarea and inserts my Count div right after it. To do that, I use this code:

$(".Expandable").each(function() {
    $(this).after("<div class='Count'></div>");
});

This gives me what I need. But... because this is added to the page after it is created, the divs aren't being added to the DOM. I need that to happen.

I know I need to use "live" and I am successfully using it elsewhere, but I can't seem to get this one to work.

$(".Count").live();

The count div will be used to display the character count of the textarea above. No user interaction will occur, such as a keyup, or blur. I haven't included this code because it works perfectly.

EDITED

$(".Expandable").change(function() {
    $(this).parent().next(".Count").html("Sunday");
});

When you type into the textarea, the next Count div should show "Sunday". This works perfectly with the hardcoded Count div but does NOT work with the dynamically generated Count div.

I have made a fiddle of this: http://jsfiddle.net/EvikJames/qyuQS/2/

The problem isn't static vs dynamic elements...they are in the DOM immediately after your .after() executes. The issue is with positioning here, in your original code:

$(this).parent().next(".Count").html("Sunday");

It is working with a structure like your static version:

<div><textarea id="NewContent" class="Expandable"></textarea></div>
<div class="Count"></div>

However, that's not what is created by:

$(".Expandable").each(function() {
    $(this).after("<div class='Count'></div>");
});

The above inserts the new <div> as a sibling to the element it's being inserted after, so .after() means immediately after, creating this:

<div>
   <textarea id="NewContent" class="Expandable"></textarea>
   <div class="Count"></div>
</div>

With that structure, you simply don't need that .parent() call, it should be just:

$(this).next(".Count").html("Sunday");

You can test it out here.

As an aside, .after() works on multiple elements, it can be brief like my example above:

$(".Expandable").after("<div class='Count'></div>");

I made a jsfiddle using your code:

http://jsfiddle.net/jeffreydev/qyuQS/

The Count elements are getting added, perhaps you should add some css to make them show up?

edit:

Or did you mean you added the Expandable textarea's to your dom? and want to add the count underneath them?

if so I would do it like so:

http://jsfiddle.net/jeffreydev/qyuQS/1/

edited again:

As explained in other people's answers, in order to change the html inside an element make sure you target the right element inside the dom structure.

Here is a working example: http://jsfiddle.net/jeffreydev/qyuQS/12/

$(this).parent().next().html('Sunday');

Explaination:

$(this) // get the current element as a jquery object (the textarea).
$(this).parent() // get the selected elements parent (the textarea's parent, the div)
$(this).parent().next() // and get the element that is next to it in the dom structure (which is the .Count element)