Add HTML element - textarea dynamically using Javascript

Question

I know it is possible to add/remove HTML elements dynamically to a web page using Javascript. I was wondering is the following possible-

My coldfusion web page has a two column table and the last row of the table has a link in the first column and the second column is blank. When user hits that link, a textarea shows up in the second column which was blank so far.

Is it possible to do this using Javascript? I went through a few links on the web and a few pointers like http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/ did help but it seems they don't help me on my scenario.

Thanks for the help in advance.

Answer 1

Certainly you could do this. I think the best way to accomplish it, however, is to create the item normally as part of the page and just hide it using a css style until you want to show it via javascript, rather than creating it from scratch dynamically. This should make it easier to integrate with your server-side code.

Answer 2

For your scenario, it may not be necessary to add the element. You could instead have the element already loaded in the dom (but hidden), then fire some code to show it when the link is clicked. The javascript for that is quite simple.

function ShowTextArea()
{
    var ta = document.getElementById("textareaId");
    ta.style = "display:inline";
}

Answer 3

The textarea element can alternatively be added dynamically to your page. Just add an id attribute to the right column and use the createElement and appendChild method to add the textarea.

function addfield() {
var e = document.createElement("textarea");
document.getElementById("extendable").appendChild(e);
}

and to the html column td add the id "extendable"

For a similar example of adding input fields see http://digitalpbk.com/2009/11/adding-html-elements-dynamically-page