关于JavaScript到底有什么用？怎么用？
这个问题也一直困扰着我，直到最近了解了JavaScript渲染html数据，才明白用js渲染数据是多么多么方便，下面给大家举几个例子：
比如用js实现列表（代码源于学长）：
html部分
<!DOCTYPE html>
<html lang="en">
<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>1</title>
</head>
<body>
<h1 id="title1"></h1>
<ul id="list1">
<!-- <li>示例</li> -->
</ul>
<h2 class="title2"></h2>
<ol class="list2">
<!-- <li>示例</li> -->
</ol>
</body>
<script src="./index.js"></script>
</html>
JavaScript部分
function render(){
// 标签标题
document.title = 'A'
const data = ['a','b','c','d','a']
const $ul = document.querySelector('#list1')
const $ol = document.querySelector('.list2')
// 渲染无序列表
data.forEach(function(v){
const $li = document.createElement('li')
$li.textContent = v
$ul.append($li)
})
// 设置title1
$ul.previousElementSibling.textContent = '无序列表'
/*
效果
1. a
2. b
3. c
4. d
5. a
*/
// 渲染有序列表
data.forEach(function(v){
const $li = document.createElement('li')
$li.textContent = v
$ol.append($li)
})
/*
效果
1. a
2. b
3. c
4. d
5. a
*/
// 设置title2
$ol.previousElementSibling.textContent = '有序列表'
}
render()
简单解读一下，
document.title
改变网页名字，这个就不多解释了，
forEach()
函数作用是罗列数组中每一个元素，其他的就不细讲了，参照我的JavaScript学习笔记。
显而易见，用js的好处就是不用在html部分一个一个去写
<li></li>
了
如果这个不够清晰，下面这个例子你就完全懂了：
实现从1-100的无序列表
html部分
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<ul id="list">
</ul>
</body>
</html>
<script src="./index.js"></script>
JavaScript部分
function fun()
{
alert('asd');
var a=document.querySelector("#list");
for(var i=1;i<=100;i++)
{
var b=document.createElement('li');
b.textContent=i;
a.append(b);
}
}
fun();
显然，如果不用js渲染，那么你得手写100个
<li>
标签，太耗时耗力，用js渲染，我们就可轻易得到想要的结果。
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)