creando un área de texto con javascript

Question

Estoy intentando crear un área de texto en un div con el id de "cuerpo". Llamo a la función con un evento onClick, pero cuando hago clic en él, todo lo que se crea es [objeto HTMLTextAreaElement]. No estoy muy seguro de cómo hacer que esto funcione.

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

Si no es necesario para acceder a funciones específicas DOM, recomiendo utilizar innerHTML (porque generalmente es más rápido y menos susceptible a pérdidas de memoria). No te olvides de lidiar adecuadamente con las comillas. Para mantener el código legible, se puede separar varias líneas por un signo más:

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

Si desea reemplazar el contenido, sólo tiene que utilizar div.innerHTML = ""; antes de usar los métodos appendChild.

Answer 2

Trate

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

Answer 3

Es mejor asignar los atributos directamente, por lo que recuerdo IE tiene problemas con setAttribute. El código puede ser cambiado a esto con el fin de lograr lo que quiere:

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>

Por cierto, textarea no tiene maxlength limitar personajes que tienen que usar JavaScript, por ejemplo: How to impose maxlength on textArea in HTML using JavaScript