Creating a textarea with JavaScript

Question

I'm trying create a text area in a div with the id of "body". I call the function with an onClick event, but when I click it, all that is created is object HTMLTextAreaElement. How can I get this to work?

function opentextarea() {
    var input = document.createElement('TEXTAREA');
    input.setAttribute('name', 'post');
    input.setAttribute('maxlength', 5000);
    input.setAttribute('cols', 80);
    input.setAttribute('rows', 40);
    var button = document.createElement('BUTTON');
    document.getElementById("body").innerHTML=input, button;
}

Rob W · Accepted Answer · 2013-03-18T18:07:04.130

var div = document.getElementById("yourDivElement");
var input = document.createElement("textarea");
var button = document.createElement("button");
input.name = "post";
input.maxLength = "5000";
input.cols = "80";
input.rows = "40";
div.appendChild(input); //appendChild
div.appendChild(button);

If you don't need to access specific DOM functions, I recommend to use innerHTML (because it's generally faster and less susceptible to memory leaks). Don't forget to properly deal with quotation marks. To keep the code readable, you can separate multiple lines by a plus sign:

document.getElementById("body").innerHTML =
   '<textarea maxlength="5000" cols="80" rows="40"></textarea>' + 
   '<button></button>"':

If you want to replace the contents, simply use div.innerHTML = ""; before using the appendChild methods.

score 5 · Answer 2 · edited May 23 '17 at 10:29

5

You better assign the attributes directly, from what I remember IE got problems with setAttribute. The code can be changed to this in order to achieve what you want:

function opentextarea() {
    var input = document.createElement('textarea');
    input.name = 'post';
    input.maxLength = 5000;
    input.cols = 80;
    input.rows = 40;
    input.className = 'myCustomTextarea';
    var button = document.createElement('button');
    var oBody = document.getElementById("body");
    while (oBody.childNodes.length > 0) {
        oBody.removeChild(oBody.childNodes[0]);
    }
    oBody.appendChild(input);
    oBody.appendChild(button);
 }

.myCustomTextarea { color: red; font-weight: bold; }

<div id="body">hello I will be replaced</div>
<button type="button" onclick="opentextarea();">Open</button>

By the way, textarea has no maxlength to limit characters you have to use JavaScript, for example: How to impose maxlength on textArea in HTML using JavaScript

edited May 23 '17 at 10:29

Community

1
1

answered Sep 11 '11 at 10:05

Shadow The GPT Wizard

66,030
26
140
208

The *Live test case* was awesome! Thank you – BoJack Horseman Oct 26 '15 at 07:52
1

Cheers @Ibrahim glad to see it's still useful four years later! Embedded it now as a Stack Snippet to make it even more awesome. :-) – Shadow The GPT Wizard Oct 26 '15 at 08:06
Hehe cool :P *in addition*, can you tell me though, how I can assign a class to the `textarea` that is created? – BoJack Horseman Oct 26 '15 at 08:10

score 1 · Answer 3 · answered Sep 11 '11 at 09:45

1

Try

document.getElementById("body").appendChild(input);
document.getElementById("body").appendChild(button);

answered Sep 11 '11 at 09:45

Jiri Kriz

9,192
3
29
36

well that's something, it adds it below the content, but I need it to replace the conent. Hence why I had .innerHTML getting somewhere though. – vacarsu Sep 11 '11 at 09:53
Add `div.innerHTML = "";` before the first `appendChild()` – Jiri Kriz Sep 11 '11 at 09:58

Creating a textarea with JavaScript

3 Answers3

Linked