Javascript 用javascript创建一个textarea
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7377399/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
creating a textarea with javascript
提问by vacarsu
I'm trying create a text area in a div with the id of "body". I call the function with an onClick event, but when I click it all that is created is [object HTMLTextAreaElement]. I am not quite sure how to get this to work.
我正在尝试在 div 中创建一个 ID 为“body”的文本区域。我使用 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;
}
回答by Rob W
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);
If you don't need to access specific DOM functions, I recommend to use innerHTML (because it's generally faster and less susceptible to memory leaks). Don't forget to properly deal with quotation marks. To keep the code readable, you can separate multiple lines by a plus sign:
如果您不需要访问特定的 DOM 函数，我建议使用 innerHTML（因为它通常更快且不易受到内存泄漏的影响）。不要忘记正确处理引号。为了保持代码可读性，您可以用加号分隔多行：
document.getElementById("body").innerHTML =
'<textarea maxlength="5000" cols="80" rows="40"></textarea>' +
'<button></button>"':
If you want to replace the contents, simply use div.innerHTML = "";before using the appendChildmethods.
如果要替换内容，只需div.innerHTML = "";在使用appendChild方法之前使用即可。
回答by Shadow Wizard is Ear For You
You better assign the attributes directly, from what I remember IE got problems with setAttribute. The code can be changed to this in order to achieve what you want:
你最好直接分配属性，因为我记得 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>By the way, textareahas no maxlengthto limit characters you have to use JavaScript, for example: How to impose maxlength on textArea in HTML using JavaScript
顺便说一句，textarea没有maxlength限制您必须使用 JavaScript 的字符，例如：如何使用 JavaScript 在 HTML 中的 textArea 上施加 maxlength
回答by Jiri Kriz
Try
尝试
document.getElementById("body").appendChild(input);
document.getElementById("body").appendChild(button);
