3_DOM如何控制内容.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334
  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. <h1>你好</h1>
  10. <div></div>
  11. <script>
  12. // !!*注意 只要通过js控制元素,必须要先获取到元素对象
  13. // 控制内容
  14. // 1:通过元素对象的innerText属性来控制元素的内容
  15. // innerText属性可以控制元素的内容,也可以获取元素的内容
  16. // innerText属性只能控制文本内容,不能当作标签操作
  17. var h1 = document.getElementsByTagName("h1");
  18. // 设置元素的内容
  19. // h1[0].innerText = "hello world";
  20. // 获取元素的内容
  21. var h1InnerText = h1[0].innerText;
  22. console.log(h1InnerText);
  23. h1[0].innerText = h1InnerText + " world";
  24. // 2、通过元素对象的innerHTML属性来控制元素的内容
  25. var oDiv = document.getElementsByTagName("div")[0];
  26. // oDiv.innerText = "<h1>world</h1>";
  27. oDiv.innerHTML = "<h1>world</h1>";
  28. </script>
  29. </body>
  30. </html>