发新贴  快速回复

动态增加div

攻城师Mr.严
2013-07-10 10:48
http://jsbin.com/ikudib/3/embed?live


 这个排版有些乱想在每四个dl外面增加一个div这个怎么添加,如图

 
leo
你是写到哪里卡住了?还是完全没有思路?
这是DOM这节课的知识点~~
2013-07-11 21:15  回复本帖
创美易-miaov
老师,说实话,这个我也不懂,比如:有100个 dl , 我想在每4个dl 外面套一个DIV.
怎么解决?思索不出
2013-07-11 23:44  回复本帖
攻城师Mr.严
 本帖最后由 攻城师Mr.严 于 2013-7-12 08:56 编辑 

leo 发表于 2013-7-11 21:15 forum.php?mod=redirect&goto=findpost&pid=20282&ptid=6939
你是写到哪里卡住了?还是完全没有思路?
这是DOM这节课的知识点~~

     创建完DOM就卡了,用求余去做的能计算出要用多少个div,但写法还有问题,div都排到dl后面去了,怎么判断有四个dl时外套一个div?
2013-07-12 08:47  回复本帖
 
leo
攻城师Mr.严 发表于 2013-7-12 08:47 forum.php?mod=redirect&goto=findpost&pid=20284&ptid=6939
创建完DOM就卡了,用求余去做的能计算出要用多少个div,但写法还有问题,div都排到dl后面去了,怎么 ...

加或减DIV:

[html]<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
#box { width:400px; padding:10px; border:1px solid #333; }
#box div { border:10px solid red; margin-bottom:10px; }
</style>
<script>
window.err= = function (){
var btn = document.getElementById('btn1');
var box = document.getElementById('box');
var dl = box.getElementsByTagName('dl');

function appendDiv(){

for(var i=0; i<3; i++){

var divBox = document.createElement('div');

for(var j=0; j<4; j++){
divBox.appendChild(dl[0]);
}

box.appendChild(divBox);

}

}

function clearDiv(){
for(var i=0; i<12; i++){
box.appendChild(dl[0]);
}
var div = box.getElementsByTagName('div');
for(var i=0; i<3; i++){
box.removeChild(div[0]);
}
}


btn.err= = function (){
if(this.value === '加div'){
appendDiv();
this.value = '减div';
}else{
clearDiv();
this.value = '加div';
}
};

};
</script>
</head>

<body>

<input id="btn1" type="button" value="加div" />

<div id="box">

<dl>
<dt>dt1</dt>
<dd>dd</dd>
<dd>dd</dd>
</dl>
<dl>
<dt>dt2</dt>
<dd>dd</dd>
<dd>dd</dd>
</dl>
<dl>
<dt>dt3</dt>
<dd>dd</dd>
<dd>dd</dd>
</dl>
<dl>
<dt>dt4</dt>
<dd>dd</dd>
<dd>dd</dd>
</dl>

<dl>
<dt>dt5</dt>
<dd>dd</dd>
<dd>dd</dd>
</dl>
<dl>
<dt>dt6</dt>
<dd>dd</dd>
<dd>dd</dd>
</dl>
<dl>
<dt>dt7</dt>
<dd>dd</dd>
<dd>dd</dd>
</dl>
<dl>
<dt>dt8</dt>
<dd>dd</dd>
<dd>dd</dd>
</dl>

<dl>
<dt>dt9</dt>
<dd>dd</dd>
<dd>dd</dd>
</dl>
<dl>
<dt>dt10</dt>
<dd>dd</dd>
<dd>dd</dd>
</dl>
<dl>
<dt>dt11</dt>
<dd>dd</dd>
<dd>dd</dd>
</dl>
<dl>
<dt>dt12</dt>
<dd>dd</dd>
<dd>dd</dd>
</dl>

</div>

</body>
</html>
[/html]
2013-07-12 09:51  回复本帖
创美易-miaov
 本帖最后由 创美易-miaov 于 2013-7-12 11:33 编辑 

谢谢老师,看来我基础还是不够好,

为什么要从dl[0]开始数?直接divBox.appendChild(dl),这样不行吗?
2013-07-12 11:28  回复本帖
攻城师Mr.严
 本帖最后由 攻城师Mr.严 于 2013-7-12 16:13 编辑 

创美易-miaov 发表于 2013-7-12 11:28 forum.php?mod=redirect&goto=findpost&pid=20289&ptid=6939
谢谢老师,看来我基础还是不够好,

为什么要从dl[0]开始数?直接divBox.appendChild(dl),这样不行吗? ...

    appendchild的功能是剪切,每次都是第一个,所以dl[0]就可以了,是这样的吧 老师
    
2013-07-12 16:11  回复本帖
攻城师Mr.严
leo 发表于 2013-7-12 09:51 forum.php?mod=redirect&goto=findpost&pid=20285&ptid=6939
加或减DIV:

[html]


   谢谢老师知道了
2013-07-12 16:13  回复本帖
攻城师Mr.严
leo 发表于 2013-7-12 09:51 forum.php?mod=redirect&goto=findpost&pid=20285&ptid=6939
加或减DIV:

[html]


     老师这个有问题,现在的数据是正好,如果不是正好的数据比如:有8个dl,套三行div,那么最后一个div里就少了一个dl,他会把循环完的第一个给抓取过来添补正好三个,你写的那个for(var j=0;j<4;j++)这里有问题,这个怎么去处理
     我处理的方法是如果到最后一个了就不去添加了,可是没有用
2013-09-23 16:34  回复本帖
cjp2000
 本帖最后由 cjp2000 于 2013-9-26 09:02 编辑 

 for(var j=0; j<4; j++){
                        divBox.appendChild(dl[0]);
                    }
在内层循环加个判断就行了,如下:
 for(var j=0; j<4; j++){
       if(dl[0]){
           divBox.appendChild(dl[0]);
       }
 };
另外,老师的例子里边dl[0]是从document里边取的。最好是套个DIV,从给定范围里边取,就可以避免你说的情况。
2013-09-25 22:53  回复本帖
登录 后才可以发表回复