Create simple swallowed Effect Based on replaceChild, replacechild swallowed

Create simple swallowed Effect Based on replaceChild, replacechild swallowed

Effect diagram:

View Source Code

[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> var oList = document. getElementById ('LIST'); // Add a li element var oAdd = document. createElement ('lil'); // you can specify the css style oAdd for the newly added element. className = "in" Export oadd.style.css Text = 'background-color: red; border-radius: 100'; // replace 50% lisetTimeout (function () {oList. replaceChild (oAdd, document. getElementsByTagName ('lil') [0]); // after 1 s, run the incrementNumber function setTimeout (incrementNumber, 1000);}, 1000); function incrementNumber () {// obtain the 1st li var oLi1 = document in the oList. getElementsByTagName ('lil') [1]; // if yes, replace if (oLi1) {oList. replaceChild (oAdd, oLi1); setTimeout (incrementNumber, 1000) ;}</script>

The above content will share with you the simple Effect of devouring Based on replaceChild. I hope you will like it.