How to write this JavaScript?
<p>If you take a look on this post, you will see that there is a "add comment" link below it. When I click on it, a <code>textarea</code> will be added and allow user to write comment.</p>

<p>I am wondering how I can write a similar function?</p>

<p><strong>Updated</strong></p>

<p>Thank you everyone for your help.</p>

<p>I made a working code. However, if it is running with Google Chrome, I will get a terrible lag. I have to wait about 15 seconds to get the <code>textarea</code> out.</p>

<p>But if I run it with IE, then no problem at all... That is a very strange issue.</p>

<p>Here is my code for the JavaScript function</p>

<pre><code>function testCall(id) {

var divName = "#Post-Number-" + id;

var appenedDiv = "&lt;div class='container2' id='r1'&gt;";
appenedDiv+="&lt;div class='acc_container'&gt;";
appenedDiv+=" &lt;div class='block'&gt;";
appenedDiv += "&lt;form method='post' action='' id='loginForm' name='loginForm'&gt;";
appenedDiv+="&lt;p&gt;My Reply:&lt;/p&gt;";
appenedDiv+="&lt;p&gt;";
appenedDiv += "&lt;textarea id='test' name='txtReply' cols='8' rows='10'&gt;&lt;/textarea&gt;";
appenedDiv += id;
appenedDiv+="&lt;/p&gt;";
appenedDiv+="&lt;p&gt;";
//appenedDiv+="&lt;%= Html.ActionLink('Submit Reply', 'Login', 'User', new { returnUrl = Request.Url }, new { @class = 'linkButton' })%&gt;";
appenedDiv+="&lt;/p&gt;";
appenedDiv+="&lt;/form&gt;";
appenedDiv+="&lt;/div&gt;";
appenedDiv+="&lt;/div&gt;";
appenedDiv += "&lt;/div&gt;";

$(divName).after(appenedDiv);
$('html, body').animate({ scrollTop: $('#r1').offset().top }, 100);
//$('#test').focus();
</code></pre>

<p>}</p>

<p>Here is how I call this function</p>

<pre><code>&lt;a href="#" onclick="testCall(&lt;%:item.QAID %&gt;);"&gt;Test&lt;/a&gt;
</code></pre>
