使用按钮点击添加新的字段集元素

Question

JavaScript是否有任何方式通过单击按钮来生成字段集中的所有元素？下面的代码显示了字段集中的两个文本框和一个textarea。当我按下“添加项目按钮”时，我想在该字段集内生成相同的文本框和textarea。

非常感谢您的帮助。

<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> 

Answer 1

可以复制它们。第一包与父母div这些元素称之为例如“模板”：

<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> 

最后这个JS代码将添加在那里的元素：

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

Just在按钮单击事件中调用函数“添加”。需要计数器以避免具有多于一个元素的相同ID。

现场测试案例：http://jsfiddle.net/yahavbr/eW6j4/

Answer 2

$('#button').click(function() { 
    $('#fieldset').clone().insertAfter($('#fieldset')); 
}); 

尝试这样的事情，克隆（）是有用的 http://api.jquery.com/clone/

-edited您comment- 后添加到您的htmlpage：-edited后

<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> 

再次您的评论 -

I为了让这个功能在新增的输入上工作，我们使用'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> 

如果代码工作，请注明该答案为“接受的答案”，以便其他用户同样的问题马上就可以看到运行的代码。

Answer 3

我喜欢的JavaScript方式

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

问候:)