javascript - 从javascript onclick添加多个跨度

Question

我有一个 div，我可以在其上使用 span 和 textarea（隐藏）键入文本。我正在调用这个 div onclick 函数。我想要的是每次点击我都应该看到一个 div 或 span。即同一页面上的多个div。 代码：

<div class="EaDetail EaDetailText" style="left: 299px; top: 80px; font-size: 17px; width: 126px; height: 23px; position: absolute; display: block;">
<div class="EaDetailInset">
<span style="font-size: 17px;">
<br>
</span>
<textarea></textarea>
</div>
</div>
<input type="button" onclick="addTextBox()" value="Add">

Javascript代码：

function addTextBox()
{
$('.EaDetailInset').show();
}

CSS：

.EaDetail, .EaDetailDisabled {
border: 1px dashed transparent;
font-size: 12px;
overflow: visible;
position: absolute;
display:none;
}
.EaDetail {
border-radius: 3px 3px 3px 3px;

}

.EaDetailInset {
display: none;
max-height: 65px;
padding-bottom:5px;
border: 2px dashed #AAAAAA;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}


.EaDetailText textarea, .EaDetailText span {
font: 100%/1.1 arial,sans-serif;
position: absolute;
white-space: pre;
}
.EaDetailText textarea, .EaDetailText textarea[disabled] {
background: none repeat scroll 0 center transparent;
border: 0 none;
bottom: 6px;
box-shadow: none;
color: #000000;
display: block;
height: 200%;
left: 6px;
line-height: 1.1;
outline: 0 none;
padding: 0;
resize: none;
right: 6px;
top: 6px;
transition: none 0s ease 0s;
width: 200%;
}

Answer 1

首先，您需要正确调用javascript函数：更改

<input type="button" onclick="addTextBox" value="Add">

进入

<input type="button" onclick="addTextBox()" value="Add">

Answer 2

如果您想拥有多个textarea/span，您需要创建子元素并将其附加到您的div，您所做的只是显示/隐藏不会复制元素。

var txt = document.createElement('textarea');
document.getElementById('myDiv').appendChild(txt); 

Answer 3

<div class="EaDetail EaDetailText" style="left: 299px; top: 80px; font-size: 17px; width: 126px; height: 23px; position: absolute; display: block;">
<div class="EaDetailInset">
</div>
</div>
<input type="button" onclick="addTextBox()" value="Add">

function addTextBox()
{
var newTextBoxdiv = $(document.createElement('div')).attr("class",'EaDetailInset');

    newTextBoxdiv.html('<span style="font-size: 17px;"><br></span><textarea></textarea></span>');

    newTextBoxdiv.insertAfter(".EaDetailInset");
  $(".EaDetailInset").show();
}

看看这是否有效