代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .article1{ background-color: pink; } .article2{ background-color: orchid; } .article3{ background-color: grey; } </style> </head> <body> <div class="article1"> 第一种:document.write()<br> 不好维护,已经成为过去式 <script> document.write('<h1>文章的标题1</h1>') </script> </div> <div class="article2"></div> <script> let article2 = document.querySelector('.article2') // 能解析成真正的 HTML 标签写入到页面中(功能更强大) article2.innerHTML = '第二种:对象.innerHTML()<br><h1>文章的标题2</h1>' </script> <div class="article3"></div> <script> let article3 = document.querySelector('.article3') // 只能写入 文本内容 article3.innerText = '第三种:对象.innerText()<br><h1>文章的标题3</h1>' </script> </body> </html>
效果图:
web API-DOM-三种写入内容的方式
最新推荐文章于 2024-10-10 20:59:20 发布