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;
}

Answer 1

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.

Answer 2

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

Answer 3

Try

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