Question

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 textarea will be added and allow user to write comment.

I am wondering how I can write a similar function?

Updated

Thank you everyone for your help.

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 textarea out.

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

Here is my code for the JavaScript function

function testCall(id) {

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

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

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

}

Here is how I call this function

<a href="#" onclick="testCall(<%:item.QAID %>);">Test</a>

Answer 1

Simple example: http://jsfiddle.net/zBUgZ/

<a onclick="addComment(this)">add comment</a>

function addComment(el){
    var t = document.createElement('textarea');
    document.body.appendChild(t);
    el.style.display = 'none';
}

Using jQuery: http://jsfiddle.net/zBUgZ/1/

<a class="addcomment">add comment</a>

$('.addcomment').click(function(){
    $(this).after('<textarea class="comment"></textarea>').hide();
});

EDIT

Since it’s more likely that the ANCHOR will have a HREF attribute, you should also return false:

<a class="addcomment" href="http://somelink.somewhere.com">add comment</a>

$('.addcomment').click(function(){
    $(this).after('<textarea class="comment"></textarea>').hide();
    return false;
});

And if you want to set an ID on the TEXTAREA, you might use one based on the ANCHOR:

<a id="addcomment1" class="addcomment" href="http://somelink.somewhere.com">add comment</a>

$('.addcomment').click(function(){
    $(this).after('<textarea class="comment" id="'+this.id+'-textarea"></textarea>').hide();
    return false;
});

http://jsfiddle.net/zBUgZ/2/

EDIT 2

And, noting that you’re trying to focus on the element, you can do this if you add an ID to the TEXTAREA:

Plain Javascript:

document.getElementById(this.id+'-textarea').focus();

jQuery:

$('#'+this.id+'-textarea').trigger('focus');

http://jsfiddle.net/zBUgZ/4/