關于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=)