当你执行
node2.appendChild（node），
//在node2的子节点集合末尾添加node，appendChild会自动删除node，如果该node是document的节点的话，则会导致页面上的node节点被删除，从而导致页面混乱。
node2.appendChild（node，node3）
//在node2的子节点node3前面添加node时，会自动删除node，如果该node是document的节点的话，则会导致页面上的node节点被删除，从而导致页面混乱
示例代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<textarea style="width: 600px; resize: none; readonly: readonly; height: 600px;"><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <br /> <style type="text/css"> #node { background-color: #888888; height: 50px; width: 100%; } #node2 { background-color:darkmagenta; height: 50px; width: 100%; } </style> <p> </head> <body> <br /> <div id="node"> <ul> <li>l</li> <p> <li>2</li> <p> <li>3</li> <p> </ul> <p> </div> <p> <br /> <div id="node2"></div> <p> <script type="text/javascript"> var nodeul = document.querySelector("#node ul"); var node2 = document.querySelector("#node2"); node2.appendChild(nodeul); </script> </body> </html> </textarea> |
代码运行结果
原本在“node”里的ul会被追加到“node2”里面，“node”里的ul然后被删除了
