jQuery - How to dynamically add an element to the DOM?
<p>I output several textareas to a page. The textareas have a class of "Expandable".  I used to output a div right after each of those Expandable textareas in my HTML code.</p>

<p>Hardcoded:</p>

<pre><code>&lt;textarea id="NewContent" class="Expandable"&gt;&lt;/textarea&gt;
&lt;div class="Count"&gt;&lt;/div&gt;
</code></pre>

<p>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:</p>

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

<p>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.</p>

<p>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.</p>

<pre><code>$(".Count").live();
</code></pre>

<p>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. </p>

<p>EDITED</p>

<pre><code>$(".Expandable").change(function() {
    $(this).parent().next(".Count").html("Sunday");
});
</code></pre>

<p>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.</p>

<p>I have made a fiddle of this:  <a href="http://jsfiddle.net/EvikJames/qyuQS/2/" rel="nofollow">http://jsfiddle.net/EvikJames/qyuQS/2/</a></p>
