从javascript onclick添加多个跨度答案

【问题标题】：Adding multiple span from javascript onclick从javascript onclick添加多个跨度
【发布时间】：2023-03-25 08:39:01
【问题描述】：

我有一个 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%;
}

【问题讨论】：

我没有遇到任何错误。我能够获得 div onclick 但这仅在我单击时完成一次。我想在点击时生成多个 div。那就是当我再次点击另一个类似的 div 时，应该会生成具有相同功能的另一个类似的 div。

标签： javascript jquery html

【解决方案1】：

<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();
}

看看这是否有效

【讨论】：

正是我想要的。非常感谢:)
$( '.EaDetailInset' ).draggable().resizable();不适用于我从函数调用的 div，但适用于我手动调用的 div。为什么？
@shabbir.rang 你能展示你的实现吗？？..最好在jsfiddle中
@shabbir.rang hmm..编辑你的代码并展示你实现的可拖动功能
嘿，我可以拖动和调整大小。现在的问题是，当我单击按钮时，它会添加 div。完美的。现在，当我再次调用它时，它会增加两个。然后再次 onclick 它添加 4，然后是 8。我希望你理解我想说什么？

【解决方案2】：

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

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

进入

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

【讨论】：

已更改。您能否更具体地说明我的要求？
不清楚您要实现什么，但如果您想添加多个跨度和 div，您将需要创建这些元素并将它们附加到某个父项。检查api.jquery.com/append

【解决方案3】：

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

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

【讨论】：

我理解您所说的并非常感谢。但我真正想知道的是'我可以两次调用相同的方法'吗？这样我就可以在两次单击按钮时获得相同的 span/textarea 两次？