By element.appendChild(newNode), let's talk about _javascript skills

In the element.appendChild(newNode) method, if newNode itself is a node in Dom, then the appendChild method performs an append operation no longer
, but a move operation. For example:

<input type="button" id="btn1" value="button 1"> <input type="button" id="btn2" value="button 2"> <input type="button" id="btn3" value="button 3"> <input type="button" id="btn4" value="button 4">
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

Because btn1 itself is in dom A node, so the appendChild operation will move btn1 to the back of btn4 instead of copying it.
Using this feature, we can achieve alternative text seamless scrolling with a very small amount of code.

<style> *{border:1px solid green} a{display:block;font-size:15px}; </style> <div id="d" style="width:300px;height:200px;"> <a href="javascript:"> </a>1. Have you ever had countless dreams? <a href="javascript:"> </a>2, but became disillusioned with the passage of time <a href="javascript:"> </a>3. Have you ever looked forward to the future? <a href="javascript:"> </a>4, but lost in the growing years</div>
[Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh to execute
]

Haha, isn’t it very simple? Well, I posted this method on CSDN in May this year, and it aroused a lot of discussion among JavaScript enthusiasts
. The post was pinned to the top of the CSDN homepage, and 300 people participated in replying to the discussion.
In addition to this application, this feature of appendChild can also be used in table sorting.

Note that the following table sorting code is only to illustrate the usage of appendChild and has not been tested in ff.<table border id="tbl" width="40%"> <tr> <td>12</td> <td>1</td> </tr> <tr> <td>9</td> <td>2</td> </tr> <tr> <td>15</td> <td>3</td> </tr> <tr> <td>18</td> <td>4</td> </tr> <tr> <td>1</td> <td>5</td> </tr> </table>

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]

How about appendChild? With great help, this sorting is simple enough.
For more table operation methods and advanced custom table sorting, please refer to my other post on CSDN (the sorting is also implemented using appendChild and is compatible with firefox)
<script> function f(){ document.body.appendChild(document.getElementById("btn1")) } </script><script> // by Go_Rush(阿舜) from http://ashun.cnblogs.com/ var t=setInterval(myfunc,1000) function myfunc(){ d.appendChild(d.firstChild)} d.onmouseover=function(){clearInterval(t)} d.onmouseout=function(){t=setInterval(myfunc,1000)} </script><script> // by Go_Rush(阿舜) from http://ashun.cnblogs.com/ function $A(arrayLike){ for(var i=0,ret=[];i<arrayLike.length;i++) ret.push(arrayLike[i]); return ret } Array.prototype.each=function(f){for(var i=0;i<this.length;i++) f(this[i],i,this)} window.onload=function(){ $A(document.getElementById("tbl").rows).sort(function(tr1,tr2){ return Number(tr1.cells[0].innerHTML)>Number(tr2.cells[0].innerHTML)?1:-1 }).each(function(tr){ document.getElementById("tbl").firstChild.appendChild(tr) }) } </script>