gpt4 book ai didi

javascript - jquery在div内创建动态div

转载 作者:行者123 更新时间:2023-11-28 10:55:56 24 4
gpt4 key购买 nike

我使用 JQuery 创建了动态插入。现在我无法在 div 内创建动态 div 这是我的代码片段

   <html>
<head>
<title>jQuery add / remove textbox example</title>
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>

</head>

<body>

<h1>jQuery add / remove textbox example</h1>


<script type="text/javascript">



$(document).ready(function(){

var counter = 2;

$("#addButton").click(function () {

if(counter>10){
alert("Only 10 textboxes allow");
return false;
}

var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'form-group' + counter)
.attr("class", 'form-group' );

var newTextBoxDiv1 = $(document.createElement('div'))
.attr("id", 'col' + counter)
.attr("class", 'col-md-8' );


newTextBoxDiv.after().html('<label class="col-md-3 control-label">Achievement #'+ counter + ' : </label>');

newTextBoxDiv1.after().html(
'<input type="text" name="achievement' + counter +
'" id="achievement' + counter + '" value="" >');

newTextBoxDiv.appendTo("#TextBoxesGroup");
newTextBoxDiv1.appendTo("#TextBoxesGroup")

counter++;
});

$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}

counter--;

$("#form-group" + counter).remove();
$("#achievement" + counter).remove();

});


});
</script>
</head><body>

<div id='TextBoxesGroup'>
<div id="form-group1">
<label class="col-md-3 control-label">Achievement #1 : </label><input type='textbox' name="achievement" id='achievement' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>

</body>
</html>

像这样创建动态 Div

<div id="col2" class="col-md-8"><input type="text" value="" id="achievement2" name="achievement2"></div>
<div id="form-group3" class="form-group"><label class="col-md-3 control-label">Achievement #3 : </label></div>

但是我想附加div,这意味着div里面有div,代码应该像这样

<div id="col2" class="col-md-8"><input type="text" value="" id="achievement2" name="achievement2">
<div id="form-group3" class="form-group"><label class="col-md-3 control-label">Achievement #3 : </label></div></div>

最佳答案

newTextBoxDiv1.appendTo("#col2")

关于javascript - jquery在div内创建动态div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23033469/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com