关于appendChild，添加元素到div中

夏天要吃西瓜瓜瓜 2017-11-10 02:47:28

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box { width:1000px;height:1000px;}
#box div { width:100px;height:100px;float:left;}
</style>
<script>
function p(){
var img=new Array();
var imgbg=document.createElement("img");
imgbg.src="img/bg.gif";
for(var j=1;j<=8;j++){
img[j]=document.createElement("img");
img[j].src="img/bg"+j+".gif";

}
for(var i=1;i<=100;i++){
var div=document.createElement("div");
var box=document.getElementById("box");
box.appendChild(div);
div.id="div"+i;
if(i==1){
div.appendChild(img[1]);
}else if(i==10){
div.appendChild(img[4]);
}else if(i==91){
div.appendChild(img[2]);
}else if(i==100){
div.appendChild(img[6]);
}else if(i>1&&i<10){
div.appendChild(img[7]);
}else if(i>90&&i<100){
div.appendChild(img[8]);
}else if(i%10==1){
div.appendChild(img[3]);
}else if(i%10==0){
div.appendChild(img[5]);
}else{
div.appendChild(imgbg);
}
}
}
</script>
</head>
<body onload="p()">
<div id="box" >
</div>
</body>
</html>
这段代码是用来制作一个五子棋棋盘。
老师的方法是把那些img作为背景放到div里。确实这种简单。
但我写的这种方法是向div里追加img元素，确实麻烦，但逻辑上我感觉也可以，就是我不懂为什么四个角（四个div）追加各自的img都没有问题，然后换成中间其他部分，像div 2~9的时候，就只有9被追加了，其他几个也是，只有第9个，第99个，第81个，第89个被追加，也是是if条件里的最后一个div。不懂为什么只追加了最后一个，每一个div不是独立的吗，为什么这种方法是错误的呢。那比如，创建第2个div的时候，满足条件1-10，就应该向它的里面追加img【7】，创建第3个div的时候，满足条件1-10，就应该向它的里面追加img【7】，怎么这样循环下来，就只有最后一个有img元素。
第一次在这里提问，这里应该都是大神，虽然我这个问题有点低级，希望有好心人不厌其烦给我解释一下啊。
这个是五子棋盘的一些图：

...全文

1059 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

进击的老李 2021-01-30

打赏
举报

画五子棋棋盘用canvas啊，你这个也太麻烦了

天际的海浪 2017-11-16

打赏
举报

}else if(i%10==1){ var img3=document.createElement("img"); img3.src=img[3].src; div.appendChild(img3);

夏天要吃西瓜瓜瓜 2017-11-16

打赏
举报

引用 5 楼 jslang 的回复:

还有imgbg也要每次都重建啊

我改完了啊，还是只有11个div 就是前11个div

天际的海浪 2017-11-11

打赏
举报

还有imgbg也要每次都重建啊

天际的海浪 2017-11-11

打赏
举报

你没有img[9]啊，应该是img[3]吧

夏天要吃西瓜瓜瓜 2017-11-11

打赏
举报

引用 1 楼 jslang 的回复:

因为appendChild()方法是在移动元素，不是复制元素。你要每次都创建一个新的img。

谢谢谢谢但是变成只创建11个div了。这是为什么啊。 <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #box { width:1000px;height:1000px;} #box div { width:100px;height:100px;float:left;} </style> <script> function p(){ var img=new Array(); var imgbg=document.createElement("img"); imgbg.src="img/bg.gif"; for(var j=1;j<=8;j++){ img[j]=document.createElement("img"); img[j].src="img/bg"+j+".gif"; } for(var i=1;i<=100;i++){ var div=document.createElement("div"); var box=document.getElementById("box"); box.appendChild(div); div.id="div"+i; if(i==1){ div.appendChild(img[1]); }else if(i==10){ div.appendChild(img[4]); }else if(i==91){ div.appendChild(img[2]); }else if(i==100){ div.appendChild(img[6]); }else if(i>1&&i<10){ var img7=document.createElement("img"); img7.alt=""; img7.src=img[7].src; div.appendChild(img7);//只有一个img，每次都在移动元素img，必须重新创建img }else if(i>90&&i<100){ var img8=document.createElement("img"); img8.src=img[8].src; div.appendChild(img8); }else if(i%10==1){ var img9=document.createElement("img"); img9.src=img[9].src; div.appendChild(img9); }else if(i%10==0){ var img5=document.createElement("img"); img5.src=img[5].src; div.appendChild(img5); }else{ div.appendChild(imgbg); } } } </script> </head> <body onload="p()"> <div id="box" > </div> </body>

夏天要吃西瓜瓜瓜 2017-11-11