1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4. <meta charset="UTF-8" />
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. <title>创建删除节点</title>
    8. </head>
    9. <body>
    10. <ul>
    11. <li>li</li>
    12. </ul>
    13. <script>
    14. const ul = document.querySelector('ul')
    15. for (let index = 0; index < 3; index++) {
    16. // 创建节点
    17. const li = document.createElement('li')
    18. // 添加子节点
    19. li.innerText = 'li' + (index + 1)
    20. ul.appendChild(li) // 向后面添加节点
    21. }
    22. ul.insertBefore(document.createElement('li'), ul.children[0]) // 向前面添加节点 insertBefore(添加的节点, 添加在谁的前面)
    23. // 删除子节点
    24. ul.removeChild(ul.children[3])
    25. </script>
    26. </body>
    27. </html>