12.元素.html 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <div id="box">11111</div>
  10. <div id="main">
  11. 2222
  12. <h1>1111</h1>
  13. </div>
  14. <script>
  15. var box = document.getElementById("box");
  16. // console.log(box.nodeName)
  17. var main = document.getElementById("main");
  18. var h1 = document.querySelector("h1");
  19. //创建元素 createElement
  20. var a1 = document.createElement("h3");
  21. // a1.innerHTML = '123'
  22. a1.innerText = '1234'
  23. console.log(a1);
  24. // alert(a1);
  25. // 添加元素 appendChild
  26. box.appendChild(a1);
  27. var a2 = document.createElement("span");
  28. a2.innerText = '哈哈哈哈';
  29. // 插入元素 insertBefore(参数1,参数2)
  30. // 参数一 插入元素
  31. // 参数二 被插入在该元素之前
  32. box.insertBefore(a2,a1);
  33. // 删除元素 removeChild
  34. main.removeChild(h1);
  35. // 删除页面元素节点 remove
  36. // h1.remove()
  37. </script>
  38. </body>
  39. </html>