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 impose maxlength on textArea in HTML using JavaScript

Answer 3

尝试

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

使用javascript创建textarea

3 个答案: