Home > Developer > JavaScript
In the element. appendChild (newNode) method, if newNode itself is a node in the Dom, The appendChild method is no longer executed.
It is an append operation, but a move operation. For example:
<Html> <body onload = f ()> <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"> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Because btn1 itself is a node in the dom, The appendChild operation will move btn1 to the end of btn4.
With this feature, we can use a very small amount of code to achieve seamless scrolling of alternative words.
<Style> * {border: 1px solid green} a {display: block; font-size: 15px}; </style> 1. You have had countless dreams. 2, but in the passage of time, 3, you have looked forward to the future, 4, but lost in the years of growth
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Haha, isn't it very concise? I sent this method to CSDN in September, which caused a lot of JavaScript hobbies.
The post was topped by the CSDN homepage, and three hundred people attended the discussion.
In addition to this application, this feature of appendChild can also be used in table sorting.
Note: The following table sorting code is only used to demonstrate appendChild usage and is not 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> <td> 15 </td> <td> 3 </td> </tr> <td> 18 </td> <td> 4 </td> </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 it to execute]
With the help of appendChild, the sorting is simple enough.
For more table operations and advanced custom table sorting methods, see my other post on CSDN (also sorted by appendChild and compatible with firefox)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
