créer une zone de texte avec javascript

Question

J'essaye de créer une zone de texte dans un div avec l'id de "body". J'appelle la fonction avec un événement onClick, mais lorsque je clique dessus, tout ce qui est créé est [object HTMLTextAreaElement]. Je ne suis pas sûr de savoir comment faire fonctionner cela.

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 vous n'avez pas besoin d'accéder aux fonctions DOM spécifiques, je vous recommande d'utiliser innerHTML (car il est généralement plus rapide et moins sensibles aux fuites de mémoire). Ne pas oublier de traiter correctement les guillemets. Pour conserver le code lisible, vous pouvez séparer plusieurs lignes par un signe plus:

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

Si vous voulez remplacer le contenu, utilisez simplement div.innerHTML = ""; avant d'utiliser les méthodes appendChild.

Answer 2

Essayez

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

Answer 3

Vous feriez mieux d'attribuer les attributs directement, de ce que je me souviens IE a eu des problèmes avec setAttribute. Le code peut être changé à ce afin d'obtenir ce que vous voulez:

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>

Par ailleurs, textarea n'a pas maxlength de limiter les caractères que vous devez utiliser JavaScript, par exemple: How to impose maxlength on textArea in HTML using JavaScript