Jquery附加创建问题
Jquery附加创建问题
提问于 2022-05-28 05:21:02
使用追加，我的innerdiv只附加一个小麦色盒子*；而使用appendTo，我的innerdiv是附加所有所需数量的小麦色盒子。因此，就我的情况而言，附录给出了正确的结果，而追加却没有这样做！
$(()=>{
$('button').click(function appendizing(){
for(let i=1; i<=9; ++i)
$('<div></div>').addClass('box').css("backgroundColor", "wheat").appendTo('.container');
});
});.container{
font-size: 0px;
border: 1px solid blue;
width: 120px;
height: 120px;
}
.box{
display: inline-block;
width: 40px;
height: 40px;
border-radius: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>
<button>appendDiv</button>
现在看一下这个附加的方法使用 ->
$(()=>{
$('button').click(function appendizing(){
for(let i=1; i<=9; ++i)
$('.container').append('<div</div>').addClass('box').css("backgroundColor", "wheat");
});
});.container{
font-size: 0px;
border: 1px solid blue;
width: 120px;
height: 120px;
}
.box{
display: inline-block;
width: 40px;
height: 40px;
border-radius: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>
<button>appendDiv</button>
这是什么原因。请解释一下..。
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-05-28 05:32:12
查一下这个
$(()=>{
$('button').click(function appendizing(){
for(let i=1; i<=9; ++i)
$('.container').append($('<div></div>').addClass('box').css("backgroundColor", "wheat"));
});
});.container{
font-size: 0px;
border: 1px solid blue;
width: 120px;
height: 120px;
}
.box{
display: inline-block;
width: 40px;
height: 40px;
border-radius: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>
<button>appendDiv</button>
Stack Overflow用户
发布于 2022-05-28 05:40:23
- 您忘记关闭要向容器添加类和样式的div标记
- ，而不是添加到附加的div-s。您可以在追加或创建元素时内联指定它，然后再追加它。
$(()=>{
$('button').click(function appendizing(){
for(let i=1; i<=9; ++i)
$('.container').append('<div class="box" style="background-color: wheat;"></div>');
});
});.container{
font-size: 0px;
border: 1px solid blue;
width: 120px;
height: 120px;
}
.box{
display: inline-block;
width: 40px;
height: 40px;
border-radius: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>
<button>appendDiv</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72413083
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号