如何使用 Javascript/Jquery 添加子元素
[英]How to add child element using Javascript/Jquery
问题描述
I need one help.
我需要一个帮助。 I need to add the child element using button click in Javascript/Jquery.I am explaining my code below.我需要使用 Javascript/Jquery 中的按钮单击添加子元素。我在下面解释我的代码。
<div class="form-group" id="intro-box">
<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname" name="introlabelname1" placeholder="Label Name" value="">
<input type="button" class="btn btn-success btn-sm" name="minus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;" onclick="addMore();">
<input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;display:none;">
</div>
<script>
function addMore(){
$('#intro-box').append('<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname" name="introlabelname" placeholder="Label Name" value="">');
}
</script>
Here i need , initially one text field and + button.在这里我需要，最初是一个文本字段和+按钮。 when user will click on plus( + ) button below the first text field one new text field will create with different id( ie-introlabelname2 ) and one plus ,minus button will create and the first text field will remain with minus button.当用户单击第一个文本字段下方的加号（ + ）按钮时，将创建一个具有不同 id（ ie-introlabelname2 ）的新文本字段，并创建一个加号、减号按钮，第一个文本字段将保留减号按钮。 suppose user will click on minus button of the second text field that particular field will erase and again plus button will remain with first text field and so on.假设用户将单击第二个文本字段的减号按钮，该特定字段将被删除，并且加号按钮将保留在第一个文本字段中，依此类推。 Here is my plunkr code .这是我的plunkr 代码。 Please help me.请帮我。
4 个解决方案
解决方案1
3 2016-10-15 07:14:09
I think this should help我认为这应该有帮助
Edited with look of '+' '-' buttons you asked for:使用您要求的“+”“-”按钮进行编辑：
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <h1>Hello</h1> <div class="form-group" id="intro-box"> <input type="text" style="width:85%;float:left;margin-bottom:5px;" class="form-control" id="introlabelname0" name="introlabelname" placeholder="Label Name" value=""> <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;" onclick="addMore(1);"> </div> <script> function addMore(i) { $("#plus").remove(); $('#intro-box').append('<div><input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname' + i + '" name="introlabelname" placeholder="Label Name" value="">' + '<input type="button" onclick="removeThis(' + i + ');" class="btn btn-danger btn-sm" name="minus" id="minus' + i + '" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;"></div>' + '<div> <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;" onclick="addMore(' + (i++) + ');"></div>'); } function removeThis(j) { $("#introlabelname" + j).remove(); $("#minus" + j).remove(); } </script> </body> </html>
解决方案2
2 2016-10-15 07:23:46
Same thing, using .clone() .同样的事情，使用.clone() 。 Be aware of changes to the HTML to add a div that identifies the elements to clone as a "template" and removal of your onclick请注意对 HTML 的更改以添加一个div ，该div将要克隆的元素标识为“模板”并删除您的 onclick
function init() { $(document).on('click', '.btn-success', function() { var clone = $('#template').clone(); $('#intro-box').append(clone); clone.find('.btn-danger').show(); }); $(document).on('click', '.btn-danger', function() { $(this).parent().remove(); }); } $(init);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="form-group" id="intro-box"> <div id="template"> <input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname" name="introlabelname1" placeholder="Label Name" value=""> <input type="button" class="btn btn-success btn-sm" name="minus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;"> <input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;display:none;"> </div> </div> </body>
解决方案3
0 2016-10-15 07:06:20
Use .ready() , define addMore function within .ready() handler;使用.ready() ，在.ready()处理程序中定义addMore函数； substitue .click() for attribute event handler onclick ;将.click()替换为属性事件处理程序onclick ； attach click event to #minus element;将click事件附加到#minus元素； check .length of "[name=introlabelname]" elements at click of both #plus , #minus elements;检查.length的"[name=introlabelname]"在两者的点击元素#plus ， #minus元件; pass boolean result to .toggle() #minus button if elements .length is not greater than 1 at click at #minus button;将布尔结果传递给.toggle() #minus按钮，如果元素.length在#minus按钮上单击时不大于1 ； remove last "[name=introlabelname]" element at click of #minus element;单击#minus元素时删除最后一个"[name=introlabelname]"元素； substitute class="form-control introlabelname" for id="introlabelname"用class="form-control introlabelname"代替id="introlabelname"
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello</h1>
<div class="form-group" id="intro-box">
<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control introlabelname" name="introlabelname" placeholder="Label Name" value="">
<input type="button" class="btn btn-success btn-sm" name="minus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;">
<input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;display:none;">
</div>
<script>
// Code goes here
$(function() {
function toggle() {
$("#minus").toggle($("[name=introlabelname]").length > 1);
}
function addMore() {
$('#intro-box').append('<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control introlabelname" name="introlabelname" placeholder="Label Name" value="">');
toggle()
}
function removeOne() {
$("[name=introlabelname]").last().remove()
toggle()
}
$("#plus").click(addMore);
$("#minus").click(removeOne)
})
</script>
</body>
</html>
plnkr https://plnkr.co/edit/6ekAL50B6j76FUWcVVhU?p=preview plnkr https://plnkr.co/edit/6ekAL50B6j76FUWcVVhU?p=preview
解决方案4
-1 2016-10-15 07:04:30
Read this http://www.w3schools.com/howto/howto_js_todolist.asp阅读这个http://www.w3schools.com/howto/howto_js_todolist.asp
Now that you want to create an input field with a different id, you can set a new variable to do that.现在您想创建一个具有不同 id 的输入字段，您可以设置一个新变量来执行此操作。
for example:例如：
one script tag:一个脚本标签：
var n=1;
Another script tag:另一个脚本标签：
document.getElementByid("btn").addEventListener("click",add(),false);
function add(){
var id="identity"+n.toString();
//converts n to string and adds it to identity
document.getElementByTagName("div").innerHTML+="<input type='text' id='"+id+"'/>";
n++;
}
I didn't test this code.我没有测试这段代码。 But you try something similar to this.但是你尝试类似的东西。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.