javascriptを使ってテキストエリアを作成する

Question

"body"というIDのdivにテキストエリアを作成しようとしています。私はonClickイベントで関数を呼び出しますが、クリックすると[object HTMLTextAreaElement]が作成されます。私はこれをどのように動作させるかについてはあまりよく分かりません。

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

を試してみて、あなたが特定のDOM関数にアクセスする必要がない場合、私は（それは一般的に、より速く、影響を受けにくいメモリリークのだから）innerHTMLプロパティを使用することをお勧めします。引用符を正しく扱うことを忘れないでください。あなたが内容を交換したい場合は、単にappendChildメソッドを使用する前div.innerHTML = "";を使用し、

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

：読み取り可能なコードを維持するには、プラス記号によって複数行に分けることができます。

Answer 2

は

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

Answer 3

私はIEがsetAttributeで問題を抱えていることから、属性を直接割り当てることをお勧めします。コードは、あなたが望むものを達成するためにこれに変更することができます：

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>

ところで

は、textareaはJavaScriptを使用する必要が文字を制限するには、no maxlengthを持っていない、例えば：How to impose maxlength on textArea in HTML using JavaScript