首先，我们需要先获取html中的元素，然后才能考虑给元素添加内容或者动态效果
这是获取元素比较常见的选择器:
<script> document.getElementById('id') //通过元素 id 来查找元素 document.getElementsByTagName('name') //通过标签名来查找元素 document.getElementsByClassName('class') //通过类名来查找元素 document.getElementsByName('name') //通过表单元素中 name 名查找元素 document.querySelector('CSS 选择器') //通过CSS 选择器获取匹配上的第一个元素 document.querySelectorAll('CSS 选择器') //通过 CSS 选择器获取匹配上的所有元素 </script>
其次，我们需要将我们想表达的内容通过JavaScript渲染到页面中
这是写入比较常见的办法：
1.document.write()
JS 中的输出语句，该语句会将内容输出到页面上，并且能够解析标签元素。
<script type="text/javascript"> document.write('<h1>哈喽！！！</h1>'); </script>
2.alert()
JS 中的警告弹框，该语句会将内容以弹窗的形式提示用户。
<script type="text/javascript"> alert('哈喽！！！'); </script>
3.元素.innerHTML = 内容
改变元素的内容（包含内部标签）可识别标签。
<div id="content"> 我是 DIV 标签 <p>我是 P 标签</p> </div> <input type="text" id="inp" value="123" /> <div id="col"> 我是黑色 </div> <script> let content = document.getElementById('content'); content.innerHTML = "<h1>我是 H1 标签</h1>"; let inp = document.getElementById('inp'); inp.value = 456; let col = document.getElementById('col'); col.style.backgroundColor = 'blue'; </script>
比方说，我们现在写一句 “学js真是一件开心的事” 渲染到页面，可以复制代码，自己运行一下。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学习</title> </head> <body> <div id="js"> </div> </body> </html> <script> let js = document.querySelector('#js'); js.innerHTML='学习js真是一件开心的事' </script>
作用，我们做一个简单的总结。JavaScript渲染页面的方法就是我们要懂得如何去获取一个元素，要明白如何将js里将我们想要的内容渲染到元素里，这样才是一个基本完整的渲染页面的办法。
