Home >Web Front-end >JS Tutorial >Create a simple loop insertion effect based on insertBefore_javascript skills
Rendering display:
【Function Description】
Use insertBefore to create a simple loop insertion effect
[HTML code description]
<ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class="in">4</li> <li class="in">5</li> <li class="in">6</li> </ul>
[CSS code description]
.in{ height: 20px; line-height: 20px; width: 20px; background-color: blue; text-align: center; color: white; }
[JS code description]
var oList = document.getElementById('list'); //新增一个li元素 var oAdd = document.createElement('li'); //设置新增元素的css样式 oAdd.className = "in"; oAdd.style.cssText = 'background-color:red;border-radius:50%'; //添加到oList中 oList.insertBefore(oAdd,null); var num = -1; var max = oList.children.length; function incrementNumber(){ num++; //oList.getElementsByTagName('li')[max]相当于null,所以不报错 oList.insertBefore(oAdd,oList.getElementsByTagName('li')[num]); if(num == max){ num = -1; } if(num == 0){ num = 1; } setTimeout(incrementNumber,1000); } setTimeout(incrementNumber,1000);
Okay, the above is the entire content of this article. The code is very simple. I believe everyone can understand it. Friends who need it can refer to this article. I hope you like it.