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-18 18:07:04Z

36

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.

edited Mar 18, 2013 at 18:07

answered Sep 11, 2011 at 9:53

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:29:57Z

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, 2017 at 10:29

CommunityBot

11 silver badge

answered Sep 11, 2011 at 10:05

user447356

2 Comments

user447356 Over a year ago

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. :-)

BoJack Horseman Over a year ago

Hehe cool :P in addition, can you tell me though, how I can assign a class to the textarea that is created?

Jiri Kriz · Accepted Answer · 2011-09-11 09:45:37Z

1

Try

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

answered Sep 11, 2011 at 9:45

Jiri Kriz

9,2823 gold badges32 silver badges37 bronze badges

2 Comments

vacarsu Over a year ago

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.

Jiri Kriz Over a year ago

Add div.innerHTML = ""; before the first appendChild()

Collectives™ on Stack Overflow

Creating a textarea with JavaScript

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related