写好了，心里不把稳，老师帮我看一下哪里写的不合理

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    html,
    body {
        margin: 0;
        padding: 0;
    }

    div:not(:nth-of-type(2)) {
        width: 500px;
        height: 100%;
        background-color: #a0e4ff;
        margin: 0 auto;
    }
    /*ul默认有外边距*/

    ul {
        width: 300px;
        height: 100%;
        background-color: #ecc7ea;
        list-style: none;
        /*清除默认边距*/
        margin: 0;
        padding: 0;
        margin: 20px auto;
        margin-bottom: 30px;
    }

    li {
        width: 200px;
        height: 30px;
        line-height: 30px;
        margin: 30px auto;
        background-color: #cdffc0;
    }
    </style>
</head>

<body>
    <div id="box">
        <button id="btnAdd">添加元素</button>
        <button id="btnRemove">删除元素</button>
        <ul id="list">我是ul
            <li>我是li1</li>
            <li>我是li2</li>
            <li>我是li3</li>
        </ul>
    </div>
    <script type="text/javascript">
    //此处填写代码
    	var btnadd=document.getElementById('btnAdd');
    	var btnremove=document.getElementById('btnRemove');
    	var fragment = document.createDocumentFragment();
    	var ul=document.getElementById('list');
    	var li=null;
    	var lis=document.getElementsByTagName('li');

    	

    	btnadd.onclick=function(){
    		console.log(lis.length);
    		
    		li=document.createElement('li');
    		li.appendChild(document.createTextNode('我是li'+(lis.length+1)));
    		fragment.appendChild(li);
    		ul.appendChild(fragment);
    	}

    	for(var i=0;i<lis.length;i++){
    		lis[i].onmouseover=function(){
    			this.style.backgroundColor='#6c59f6'
    		}
    	}

    	for(var i=0;i<lis.length;i++){
    		lis[i].onmouseout=function(){
    			this.style.backgroundColor='#d38686'
    		}
    	}


    	


    	
    </script>
</body>

</html>

都知欢聚最难得 2019-11-04

源自：JS DOM操作 11-2 编程练习

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2019-11-04 18:09:01

你好同学，实现不了动态的，lis.length获取的就是当前页面中li的长度。这里所说的动态和你理解的不是一回事。例如当你点击按钮的时候，页面中添加了一个li，此时一共有4个，那么事件中执行lis.length获取的就是当前的这4个。动态说的就是这个，并不是说lis.length长度变化了，其他地方使用lis.length也会跟随变化。

for循环在页面打开的时候，代码已经执行完毕了，不会再次执行，所以它执行时，获取的就是页面刚开始的li长度。而事件中的代码，点击一次执行一次，自然获取的li长度也是最新的。重新理解一下哦。

如果想要给新添加的li设置样式，在事件中绑定一下，如下：

练习不要求，所以不写也没事

祝学习愉快，望采纳。

收起回答

好帮手慕夭夭 2019-11-04 16:53:26

你好同学，最后一个任务没有实现

参考如下完善：

其他的没有问题，祝学习愉快，望采纳。

收起回答

提问者都知欢聚最难得 #1

um...不知道出了啥问题，我在编辑器里面写了，可能复制粘贴的时候出了问题。我还有一个问题，就是我的代码里按钮点击方法里面的lis.length是动态的，但是for循环里的lis.length不是动态的，这是为什么？如果我也想要for循环lis长度是动态，应该怎么实现？

2019-11-04 17:00:35