使用javascript創建textarea

Question

我正在嘗試在「body」的id中創建文本區域。我用onClick事件調用該函數，但是當我單擊它時，所創建的全部內容都是[對象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（因爲它通常是更快，更容易受到內存泄漏）。不要忘記正確處理引號。爲了保持代碼的可讀性，你可以用加號分隔多個行：

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

如果要替換的內容，使用appendChild方法之前，簡單地使用div.innerHTML = "";。

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沒有maxlength限制必須使用JavaScript字符，例如：How to impose maxlength on textArea in HTML using JavaScript