Javascript 自动在一行中创建div

我尝试每隔几秒钟自动生成div。现在我有了它，所以我必须单击以创建div。我怎样才能使我的div在加载页面时自动水平生成，直到它们填满页面？多谢各位

$（'add'）。在（'click'，function（）上{
如果（$（'#child'）.height（）=$（'#main'）.height（）&&$（'#child'）.width（）=$（'#main'）.width（））{
控制台日志（“完成”）；
}否则{
$（'#child'）。追加（'aaaa'）
}
})

#主{
宽度：500px；
高度：500px；
背景：红色；
}
#潜艇{
宽度：50px；
高度：50px；
背景：蓝色；
}

添加

您可以尝试

setInterval

功能

var interval=setInterval（函数（）{
如果（$（'#child'）.height（）=$（'#main'）.height（）&&$（'.row'）.last（）.width（）=$（'#main'）.width（））{
控制台日志（“完成”）；
间隔时间；
}否则{
var u$行；
如果（$（'.row'）.last（）.width（）=$（'#main'）.width（）| |$（'.row'）.length==0）{
_$row=$（''）；
$（'#子'）.append（$row）；
}否则{
_$row=$（'.row'）.last（）；
}
_$row.append（'aaaa'）；
}
}, 50);
#主{
宽度：500px；
高度：500px；
背景：红色；
}
#潜艇{
宽度：50px；
高度：50px；
背景：蓝色；
浮动：左；
}
.罗：之后{
明确：两者皆有；
内容：''；
显示：表格；
}
.行{
宽度：适合的内容；
}

添加
使用jQuery，当文档准备就绪时，使用setTimeout每隔X毫秒进行一次填充


$（'document'）.ready（函数（）{
常数秒=2；
函数fill（）{
如果（$（'#child'）.height（）=$（'#main'）.height（）&&$（'#child'）.width（）=$（'#main'）.width（））
返回；
$（'#child'）。追加（'aaaa'）；
设置超时（填充，秒*1000）；
}
设置超时（填充，秒*1000）；
});
#主{
宽度：500px；
高度：500px；
背景：红色；
}
#潜艇{
宽度：50px；
高度：50px；
背景：蓝色；
}

添加
有几种方法可以处理它，但从代码中获取所需内容的最快方法是使用


//没有冲突安全文档就绪功能
jQuery（函数（$）{
//调用函数来启动一些事情
addRowInOneSecond（）；
//为了清晰/可维护性，添加行被放置在此函数中
函数addRowinOneCond（）{
设置超时（addRow，1000）；
}
函数addRow（）{
如果（$（'#child'）.height（）=$（'#main'）.height（）&&$（'#child'）.width（）=$（'#main'）.width（））{
控制台日志（“完成”）；
//停下来，别做别的事
返回；
}
//添加行
$（'#child'）。追加（'aaaa'）
//再次调用该函数以添加另一行
addRowInOneSecond（）；
}
});
#主{
宽度：500px；
高度：500px；
背景：红色；
}
#潜艇{
宽度：50px；
高度：50px；
背景：蓝色；
}

添加
您可以使用setInterval自动添加框。并使用
显示：内联块
用于
#sub
css样式，使其水平

请参见下面的代码段：


var区间；
间隔=设置间隔（函数（）{
if（$（'#child'）.width（）==$（'#main'）.width（））{
控制台日志（“完成”）；
间隔时间；
}否则{
$（'#child'）。追加（'aaaa'）
}
},1000);
#主{
宽度：500px；
高度：500px；
背景：红色；
}
#潜艇{
宽度：50px；
高度：50px；
背景：蓝色；
显示：内联块；
边框：1px纯白；
框大小：边框框；
}
#儿童{
显示：内联；
}

添加
您可能想使用
setInterval
。此方法将在每个间隔执行作为第一个参数传入的函数（直到清除为止）


设i=0；
const main=document.querySelector（'#main'）；
设置间隔（（）=>{
var el=document.createElement（'div'）；
var text=document.createTextNode（i++）；
el.setAttribute（'id'，'sub-${i}`）；
el.setAttribute（'class'，'sub'）；
el.附件（文本）；
主、辅项（el）；
}, 2000);
#主{
宽度：500px；
高度：500px；
背景：红色；
}
.sub{
宽度：50px；
高度：50px；
背景：蓝色；
颜色：白色；
}

如果它们调整了大小，功能会是什么？它似乎在一行之后停止。怎么会这样，它会继续到另一排并继续前进？它似乎只在一排之后停止？它怎么能填满整个分区或身体？更新！再复习一遍。CSS类也被添加了。它似乎只在一行中下降。它怎么能在一定数量后开始新的一行并水平移动呢？