javascript 单击按钮添加新的字段集元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5315655/
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
Add new fieldset elements with button click
提问by Igor Novoselov
Is there any way with JavaScript to generate all the elements in the fieldset with the click of a button? Code below shows two textboxes and one textarea in a fieldset.When I press 'Add item button',I would like to generate the same textboxes and textarea within that fieldset.
JavaScript 有没有办法通过单击按钮生成字段集中的所有元素？下面的代码显示了字段集中的两个文本框和一个文本区域。当我按下“添加项目按钮”时，我想在该字段集中生成相同的文本框和文本区域。
Many thanks for your help.
非常感谢您的帮助。
<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>
回答by Shadow Wizard is Ear For You
You can clone them. First wrap those elements with parent divcall it for example "template":
你可以克隆它们。首先用父级包装这些元素，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>
Second have placeholder that will contain all the clones you add:
第二个占位符将包含您添加的所有克隆：
<div id="placeholder">
<div id="template">
<p>Item <input type ="text" size="25" name="prof_item" /><br /></p>
...
</div>
</div>
And finally this JS code will add the elements in there:
最后这个 JS 代码将在那里添加元素：
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder").appendChild(oClone);
}
Just call the function "Add" in the button click event.. the counter is required to avoid having same ID for more than one element.
只需在按钮单击事件中调用函数“添加”.. 计数器需要避免多个元素具有相同的 ID。
Live test case: http://jsfiddle.net/yahavbr/eW6j4/
现场测试用例：http: //jsfiddle.net/yahavbr/eW6j4/
回答by rsplak
$('#button').click(function() {
$('#fieldset').clone().insertAfter($('#fieldset'));
});
Try something like this, Clone() is useful http://api.jquery.com/clone/
尝试这样的事情， Clone() 很有用 http://api.jquery.com/clone/
-edited after your comment- Add this to your htmlpage:
- 在您的评论后编辑 - 将此添加到您的 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>
-edited again after your comment-
-在您发表评论后再次编辑-
In order to let the function work on newly added inputs as well, we use 'live'. the .click that I suggested works on the elements when the code is executed. When we use .live, the function will be executed with every existing element that you selected, but also with future elements of your selection. Use this:
为了让函数也适用于新添加的输入，我们使用“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>
If the code works, please mark this answer as 'accepted answer' so other users with the same question can immediately see the working code.
如果代码有效，请将此答案标记为“已接受的答案”，以便其他有相同问题的用户可以立即看到有效的代码。
回答by Marwan
i prefer javascript way
我更喜欢 javascript 方式
var fieldset= document.getElementById('fieldset');
var fieldParent = fieldset.parentNode;
var newFieldSet = document.createElement('fieldset');
newFieldSet.innerHTML = fieldset.innerHTML;
fieldParent.appendChild(newFieldSet);
Regards :)
问候 ：）
