Javascript 通过单击按钮添加新的字段集元素

JavaScript有没有办法通过点击按钮生成字段集中的所有元素？下面的代码显示了一个字段集中的两个文本框和一个文本区域。当我按下“添加项按钮”时，我想在该字段集中生成相同的文本框和文本区域

非常感谢你的帮助

<fieldset id="fieldset">
<legend id="legend">Professional development</legend>
<p>Item                     <input type ="text" size="25"   name="prof_item" /><br /></p>
<p>Duration                 <input type ="text" size="25"   name="prof_duration" /><br /></p>
<p>Enlargement              <label for="enlargement"></label><p></p>
                            <textarea name="textarea" cols="71" rows="5" id="prof_enlargement">
</textarea></p>
<p><input type="submit" name="Submit" value="Add new item" id="add_prof" /></p>
</fieldset>

专业发展
项目

持续时间

放大

试试这样，Clone（）很有用

-在您的评论之后编辑- 将此添加到htmlpage：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script>
$(document).ready(function() {
    $('#add_prof').click(function() {
            $('#fieldset').clone().insertAfter($('#fieldset'));
    });
});
</script>

$（文档）.ready（函数（）{
$（“#添加教授”）。单击（函数（）{
$（“#字段集”）.clone（）.insertAfter（$（“#字段集”）；
});
});

-在您的评论之后再次编辑-

为了让函数也能在新添加的输入上工作，我们使用“live”。我建议的.click在代码执行时对元素起作用。当我们使用.live时，该函数将使用您选择的每个现有元素以及您选择的未来元素执行。使用以下命令：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script>
$(document).ready(function() {
    $('fieldset input').live('click',function() {
            $(this).parent('fieldset').clone().insertAfter($(this).parent('fieldset'));
    });
});
</script>

$（文档）.ready（函数（）{
$（'fieldset input'）.live（'click'，function（）{
$（this.parent（'fieldset'）.clone（）.insertAfter（$（this.parent（'fieldset'））；
});
});

---

如果代码有效，请将此答案标记为“已接受答案”，以便其他具有相同问题的用户可以立即看到工作代码。

我更喜欢javascript方式

var fieldset= document.getElementById('fieldset');
var fieldParent = fieldset.parentNode;
var newFieldSet = document.createElement('fieldset');
newFieldSet.innerHTML = fieldset.innerHTML;
fieldParent.appendChild(newFieldSet);

---

问候：）

您可以克隆它们。首先用parent

div将这些元素包装起来，例如将其称为“template”：

只需在按钮单击事件中调用函数“Add”。。计数器需要避免多个元素具有相同的ID

实时测试用例：
@rsplak我应该将您的摘录放在代码中的什么位置？我尝试在内部标记前后放置，但当我单击按钮时，什么都没有发生。我确实在文档中启用了jquery，但是还是什么都没发生。谢谢你的帮助。它工作得很好，但是我怎样才能使它工作，使按钮在克隆的字段集上再次工作@rsplakthank再次感谢您的回答。问题是我有四个不同的字段集，它们的名称是：。如何使这四个字段集都能工作？我以前的代码是这样做的：$（document）。ready（function（）{$（'#add_prof'）。单击（function（）{$（'#fieldset4'）.clone（）.insertAfter（$（'.#fieldset4'）））；））@rsplak我所做的最后一次编辑不是按ID选择，而是按元素类型选择。我想你想要这个，所以我做了不同于以前的更新。这次我使用$（This.parent（'fieldset'）查看在单击输入时要克隆哪个字段集。在此之后，我在您单击的字段集之后添加字段集。尝试代码，祝您好运：）仍然不起作用。很抱歉，我一直在打扰您。我真的不知道问题出在哪里。我以前只能使它对每个字段集都起作用，并为每个字段集指定id，非常感谢您的帮助。现在它工作得非常好@阴影向导克隆元素比指定相同的内部HTML要好，但您的想法很好。
var fieldset= document.getElementById('fieldset');
var fieldParent = fieldset.parentNode;
var newFieldSet = document.createElement('fieldset');
newFieldSet.innerHTML = fieldset.innerHTML;
fieldParent.appendChild(newFieldSet);

<div id="template">
  <p>Item <input type ="text" size="25" name="prof_item" /><br /></p>
  <p>Duration <input type ="text" size="25" name="prof_duration" /><br /></p>
  <p>Enlargement <label for="enlargement"></label></p>
   <p><textarea name="prof_enlargement" cols="71" rows="5" id=""></textarea></p>
</div>

<div id="placeholder">
  <div id="template">
     <p>Item <input type ="text" size="25" name="prof_item" /><br /></p>
     ...
   </div>
</div>

var _counter = 0;
function Add() {
    _counter++;
    var oClone = document.getElementById("template").cloneNode(true);
    oClone.id += (_counter + "");
    document.getElementById("placeholder").appendChild(oClone);
}