用JavaScript创建一个文本区

Creating a textarea with JavaScript

本文关键字：一个 文本区 JavaScript 创建      更新时间：2023-09-26

我尝试在div中创建一个id为" body "的文本区域。我用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;
}

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 = "";。

你最好直接分配属性，从我记得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的字符，例如:如何使用JavaScript在HTML中对textArea施加maxlength

Try 

document.getElementById("body").appendChild(input);
document.getElementById("body").appendChild(button);
相关文章：