Using ReplaceChild to make a simple engulfing effect "Jsdemo"

"Feature description"
Use ReplaceChild to make simple engulfing effects

"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"

<script>varOlist = document.getElementById (' list ');//Add an LI elementvarOadd = document.createelement (' li ');//set CSS styles for new elementsOadd.classname = "in"; OAdd.style.cssText= ' background-color:red;border-radius:50% ';//1s after oadd replace No. 0 LiSetTimeout (function() {Olist.replacechild (Oadd,document.getelementsbytagname (' Li ') [0]); //execute incrementnumber function after 1sSetTimeout (incrementnumber,1000); },1000);functionIncrementnumber () {//get 1th li in Olist    varOLi1 = document.getElementsByTagName (' li ') [1]; //If there is a replacement processing    if(OLI1) {olist.replacechild (OADD,OLI1); SetTimeout (Incrementnumber,1000); }}</script>

"Effect Show"

"Source View"

Using ReplaceChild to make a simple engulfing effect "Jsdemo"