关于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元素。
第一次在这里提问,这里应该都是大神,虽然我这个问题有点低级,希望有好心人不厌其烦给我解释一下啊。
这个是五子棋盘的一些图:
...全文
958 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);
  • 打赏
  • 举报
回复
引用 5 楼 jslang 的回复:
还有imgbg也要每次都重建啊
我改完了啊,还是只有11个div 就是前11个div <!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(); 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 img3=document.createElement("img"); img3.src=img[9].src; div.appendChild(img3); }else if(i%10==0){ var img5=document.createElement("img"); img5.src=img[5].src; div.appendChild(img5); }else{ var imgbg=document.createElement("img"); imgbg.src="img/bg.gif"; div.appendChild(imgbg); } } } </script> </head> <body onload="p()"> <div id="box" > </div> </body> </html>
天际的海浪 2017-11-11
  • 打赏
  • 举报
回复
还有imgbg也要每次都重建啊
天际的海浪 2017-11-11
  • 打赏
  • 举报
回复
你没有img[9]啊,应该是img[3]吧
  • 打赏
  • 举报
回复
引用 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>
  • 打赏
  • 举报
回复
谢谢谢谢 但是变成只创建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-10
  • 打赏
  • 举报
回复
因为appendChild()方法是在移动元素,不是复制元素。 你要每次都创建一个新的img。

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧