使用javascript创建textarea

Question

我正在尝试在id为"body"的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(因为它通常更快,更不容易受到内存泄漏).不要忘记妥善处理引号.为了保持代码可读,您可以使用加号分隔多行:

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

如果要替换内容,只需div.innerHTML = "";在使用appendChild方法之前使用.

Answer 2

你最好直接分配属性，据我记得 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 Implement maxlength on textArea in HTML using JavaScript