12_节点操作.html 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8. </head>
  9. <body>
  10. <div id="div1">
  11. <p id="p1">123</p>
  12. <p>456</p>
  13. </div>
  14. <script>
  15. var a = document.createElement('p')
  16. var b = document.createTextNode('789')
  17. console.log(a)
  18. console.log(b)
  19. a.appendChild(b)
  20. console.log(a)
  21. //appendChild 向html里面添加新元素 必须先创建元素接待你 然后追加
  22. var div1 = document.getElementById('div1')
  23. // div1.appendChild(a)
  24. var p1 = document.getElementById('p1')
  25. //insertBefore(参数1,参数2) 向参数2前面添加参数1
  26. // div1.insertBefore(a,p1)
  27. //xx.remove()在页面中删除xx节点
  28. // p1.remove()
  29. //xx.removeChild()移除XX里面的子节点
  30. // div1.removeChild(p1)
  31. //xx.replaceChild(新节点,旧节点)
  32. div1.replaceChild(a,p1)
  33. </script>
  34. </body>
  35. </html>