本文解析了当 appendChild 的目标节点已存在于 DOM 树中时，其执行逻辑由追加变为移动的特性。通过具体示例展示了如何利用这一特性以极简代码实现文字无缝滚动效果，并探讨了该机制在表格排序中的应用。文中提供了相关代码示例及注意事项，旨在帮助开发者更高效地操作 DOM 元素。
appendChild 移动节点特性解析
在调用 element.appendChild(newNode) 时，若 newNode 已经是当前文档中存在的节点，该方法的实际行为并非简单的追加，而是执行移动操作。
具体而言，这相当于将节点从原位置移除并插入到指定父元素的末尾。例如：
<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> </html>由于 btn1 原本就是 DOM 树中的一个节点，执行 appendChild 操作后，btn1 会被移动到 btn4 之后，而不是被复制一份。
文字无缝滚动实现示例
利用这一特性，我们可以用极少的代码实现文字无缝滚动的效果。
<style> *{border:1px solid green} a{display:block;font-size:15px}; </style> <div id="d" style="width:300px;height:200px;"> 1,你可曾有过无数的梦想， 2,却在时光的流逝里幻灭 3,你可曾对未来期待憧憬， 4,却在成长的岁月中迷失 </div> 这种实现方式非常简洁。该方法曾于今年五月份发布在 CSDN 上，引发了众多 JavaScript 爱好者的热烈讨论。
相关帖子曾被 CSDN 首页置顶，吸引了三百多人参与回复和交流。
表格排序应用与注意事项
除了上述应用，appendChild 的这一特性在表格排序场景中同样具有实用价值。
需要注意的是，下方的表格排序代码仅用于演示 appendChild 的用法，未在 Firefox 浏览器中进行测试。
<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> 借助 appendChild 的特性，实现表格排序的代码变得相当简洁。
关于表格的其他操作方法以及更高级的自定义排序功能，请参考我在 CSDN 发布的另一篇文章（该文章同样使用 appendChild 实现排序，且兼容 Firefox 浏览器）。