现在的页面，已经不仅仅是只有观赏功能，需要连接后台的接口，甚至根据后台信息实时更改展示在页面上的信息。所以，我们需要动态的创建我们的页面。
今天，推荐大家几种，简单又实用的动态创建页面的方式。
1.节点操作
2.字符串拼接
3.ES6
4.百度模板
一、节点操作
节点操作，即根据文档的DOM结构，利用原生js或者jq来动态改变我们的页面。这需要我们熟练获取DOM上的节点并熟练的操作他们。这里复习一下关于获取节点和操作节点的常用命令。
JavaScript节点的获取和操作常用命令
1.jpg
二、jQuery节点的获取和操作常用命令
2.jpg
这里给大家举个之前文章中写过的例子，基本是上的功能都是节点操作。
对话效果图.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Title</title>
</head>
<body>
<div class="list-wrap">
<div class="header t-cent">
<span> </span>
</div>
<ul id="list">
<li class="user1">
<div class="cont">
<img src="1.jpg">
<p class="text">hi！史塔克</p>
</div>
</li>
<li class="user2">
<div class="cont">
<img src="2.jpg">
<p class="text">hi！莉莉妮特</p>
</div>
</li>
</ul>
<div class="box">
<div class="user">
<div class="name" id="name" data-id="1">莉莉妮特</div>
<ul class="name-list" id="name-list">
<li data-id="1">莉莉妮特</li>
<li data-id="2">史塔克</li>
</ul>
</div>
<input type="text" id="text" value="">
<input type="button" type="button" id="send" value="发送">
</div>
</div>
<script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
var yuan;//定义全局变量，用来标记选择的名字
$("#name").on("click",function(){
//点击时显示出名字列表
$("#name-list").css("display","block");
//当点击时选择其中一个名字
$("#name-list li").click(function(){
yuan = $(this).html();//记录下选择的名字，用于后面判断
$("#name").html($(this).html());//将选择的名字显示在列表里
$("#name-list").css("display","none");//名字列表消失
})
})
//输入文字,点击发送
// <li class="user2">
// <div class="cont">
// <img src="2.jpg">
// <p class="text">hi！莉莉妮特</p>
// </div>
// </li>
//此刻先分析页面结构
//1.每一句话的显示都是一个li标签
//2.里面有一个div都有一个img标签（用来放置头像）和一个p标签（用来存将要发送的文字）
//3.所以，每创建一句话，都要创建这些标签，才能保证页面不会错乱
$("#send").on("click",function(){
//得到文字$("#text").val()
var $language=$("<p class='text'></p>");//创建一个p标签
var $cont = $("<div class='cont'></div>");//创建一个div
$language.html($("#text").val());//得到即将发送的文字
//进行判断，当时选择的是莉莉妮特
if(yuan=="莉莉妮特") {
//创建莉莉妮特的头像
var $img=$("<img src='1.jpg'>");
//将头像添加到div里
$cont.append($img);
//将即将发送的文字添加到div里
$cont.append($language);
//创建一个li用来
var $li = $("<li class='user1'></li>");
//将div添加到li标签里
$li.append($cont);
//将li标签显示在页面上
$("#list").append($li)
}else{
//创建史塔克的头像
var $img=$("<img src='2.jpg'>");
//将头像添加到div里
$cont.append($img);
//将即将发送的文字添加到div里
$cont.append($language);
//创建一个li用来
var $li = $("<li class='user2'></li>");
//将div添加到li标签里
$li.append($cont);
//将li标签显示在页面上
$("#list").append($li)
}
})
</script>
</body>
</html>
从上述例子大家可以看到，当我们用操作节点的方式去修改我们的页面的时候，需要的代码较多，并且比较繁琐，容易出错，所以在小部分需要修改页面的时候，可以采取这种方式，而且对于大规模的修改页面就不适合了。
介绍下一种方式之前，我们先看一下正常我们不请求数据的时候，搭建的静态页面是这样的
00.jpg
而我们需要书写的代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div id="home">
<div class="container" id="hot">
<div id="hot_content" class="content_container">
<a href="###" class="hot_content_item">
<img src="./img/home/home51.jpg" alt="" />
<p class="title">音苏提有机酸奶酪</p>
<p>
<span class="best">精选</span>
<span class="maizeng">买一赠一</span>
</p>
<p class="weight">140g</p>
<p class="price_container">
<span class="now_price">￥7.9</span>
<span class="original_price">￥12</span>
</p>
<span class="add">+</span>
</a>
<a href="###" class="hot_content_item">
<img src="./img/home/home51.jpg" alt="" />
<p class="title">音苏提有机酸奶酪</p>
<p>
<span class="best">精选</span>
<span class="maizeng">买一赠一</span>
</p>
<p class="weight">140g</p>
<p class="price_container">
<span class="now_price">￥7.9</span>
<span class="original_price">￥12</span>
</p>
<span class="add">+</span>
</a>
<a href="###" class="hot_content_item">
<img src="./img/home/home51.jpg" alt="" />
<p class="title">音苏提有机酸奶酪</p>
<p>
<span class="best">精选</span>
<span class="maizeng">买一赠一</span>
</p>
<p class="weight">140g</p>
<p class="price_container">
<span class="now_price">￥7.9</span>
<span class="original_price">￥12</span>
</p>
<span class="add">+</span>
</a>
<a href="###" class="hot_content_item">
<img src="./img/home/home51.jpg" alt="" />
<p class="title">音苏提有机酸奶酪</p>
<p>
<span class="best">精选</span>
<span class="maizeng">买一赠一</span>
</p>
<p class="weight">140g</p>
<p class="price_container">
<span class="now_price">￥7.9</span>
<span class="original_price">￥12</span>
</p>
<span class="add">+</span>
</a>
</div>
<a href="###" id="hot_last">点击查看全部商品></a>
</div>
</main>
</div>
<script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
<script type="text/javascript" src="js/index.js" ></script>
</body>
</html>
这样一小部分页面，还是静态页面，不算书写的css，就需要写这么多代码，那我们前端工作人员的头发还留住么，毕竟很多前端还是妹纸呢？所以，根据以上例子，推荐大家动态创建页面
二、字符串拼接
其实，我们上面的代码还是有用的，起码帮助我们梳理了页面需要的效果，因为都是相同的结果，用字符串拼接的结构，首先我们需要的，是我们需要动态创建那些内容。从上述栗子不难看出，当然是那些重复的代码，如下所示
<a href="###" class="hot_content_item">
<img src="./img/home/home51.jpg" alt="" />
<p class="title">音苏提有机酸奶酪</p>
<p>
<span class="best">精选</span>
<span class="maizeng">买一赠一</span>
</p>
<p class="weight">140g</p>
<p class="price_container">
<span class="now_price">￥7.9</span>
<span class="original_price">￥12</span>
</p>
<span class="add">+</span>
</a>
这一小段代码，我们需要重复写n遍，而且不便于维护，那么我们可以运用字符串拼接的方式，实现动态创建我们的代码，如下
$.getJSON("http://www.vrserver.applinzi.com/aixianfeng/apihomehot.php",
null, function (result) {
var dataArr = result.data;
var str = "";
for (var tempHotObj of dataArr) {
str += '<a href="###" class="hot_content_item">';
str += '<img src="' + tempHotObj.img + '" alt="" />';
str += '<p class="title">' + tempHotObj.name + '</p>';
str += '<p>';
str += '<span class="best">精选</span>';
str += '<span class="maizeng">' + tempHotObj.pm_desc + '</span>';
str += '</p>';
str += '<p class="weight">' + tempHotObj.specifics + '</p>';
str += '<p class="price_container">';
str += '<span class="now_price">￥' + tempHotObj.price + '</span>';
str += '<span class="original_price">￥' + tempHotObj.market_price + '</span>';
str += '</p>';
str += '<span class="add">+</span>';
str += '</a>';
}
//添加页面
$("#hot_content").html(str);
});
从上段代码，可以看出，我们只要按照上面代码的结构，一句一句的按照字符串方式拼接起来，而用“+变量+”的方式动态改变灵活的数据，那请求到多少数据，就显示在页面上多少数据，而页面上的如上的代码块，我们都可以删掉了，但是为了后期维护数据和查看页面结构，注释即可。
如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div id="home">
<div class="container" id="hot">
<div id="hot_content" class="content_container">
<!-- 开始注释 注释掉页面上动态创建的代码
<a href="###" class="hot_content_item">
<img src="./img/home/home51.jpg" alt="" />
<p class="title">音苏提有机酸奶酪</p>
<p>
<span class="best">精选</span>
<span class="maizeng">买一赠一</span>
</p>
<p class="weight">140g</p>
<p class="price_container">
<span class="now_price">￥7.9</span>
<span class="original_price">￥12</span>
</p>
<span class="add">+</span>
</a>
注释结束 -->
</div>
<a href="###" id="hot_last">点击查看全部商品></a>
</div>
</main>
</div>
<script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
<script type="text/javascript" src="js/index.js" ></script>
</body>
</html>
那最后我们得到的效果图如下
GIF.gif
三、ES6 模板字符串
还是沿用上栗。但是ES6方式代码如下
$.getJSON("http://www.vrserver.applinzi.com/aixianfeng/apihomehot.php",
null, function (result) {
var dataArr = result.data;
var str = "";
for (var tempHotObj of dataArr) {
str += `<a href="###" class="hot_content_item">
<img src="${tempHotObj.img}" alt="" />
<p class="title">${tempHotObj.name}</p>
<p>
<span class="best">精选</span>
<span class="maizeng">${tempHotObj.pm_desc}</span>
</p>
<p class="weight">${tempHotObj.specifics}</p>
<p class="price_container">
<span class="now_price">￥${tempHotObj.price}</span>
<span class="original_price">￥${tempHotObj.market_price}</span>
</p>
<span class="add">+</span>
</a>`;
}
//添加页面
$("#hot_content").html(str);
});
从上段代码可以看出，这次我们不需要一句一句的拼接整个代码段，而是直接粘贴过来，用反撇号（）**，反撇号就是数字键盘1前面看上去不太起眼的那位（现在人家咸鱼翻身了，作用大着呢），接着说，用**反撇号（）将粘贴过来的代码段包裹起来就可以了。
对于代码段中的变量部分，需要大括号{ }将变量包裹起来就可以了。运行效果和字符串拼接方式实现的效果是一样的，如下所示
GIF.gif
四、百度模板
百度模板也是常用之一。
还是启用上述栗子，代码如下
$.getJSON("http://www.vrserver.applinzi.com/aixianfeng/apihomehot.php",
null, function (result) {
var dataArr = result.data;
var str = "";
str = baidu.template('hotTemplate', result);
//添加页面
$("#hot_content").html(str);
//设置懒加载
$("#hot_content img").lazyload({
effect : 'fadeIn'
})
});
是不是看不懂？因为代码不全呀~因为，此时页面的代码是这样的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div id="home">
<div class="container" id="hot">
<div id="hot_content" class="content_container">
<!--开始注释
<a href="###" class="hot_content_item">
<img src="./img/home/home51.jpg" alt="" />
<p class="title">音苏提有机酸奶酪</p>
<p>
<span class="best">精选</span>
<span class="maizeng">买一赠一</span>
</p>
<p class="weight">140g</p>
<p class="price_container">
<span class="now_price">￥7.9</span>
<span class="original_price">￥12</span>
</p>
<span class="add">+</span>
</a>
结束注释-->
</div>
<a href="###" id="hot_last">点击查看全部商品></a>
</div>
</main>
</div>
<script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
<script type="text/javascript" src="js/index.js" ></script>
<script type="text/javascript" src="js/jquery.lazyload.min.js" ></script>
<script type="text/javascript" src="js/baiduTemplate.js" ></script>
<script type="text/template" id="hotTemplate">
<% for (var tempObj of data) { %>
<a href="###" class="hot_content_item">
<!-- 懒加载 -->
<img data-original=" <%= tempObj.img %> " alt="" />
<p class="title">音苏提有机酸奶酪</p>
<p>
<span class="best">精选</span>
<span class="maizeng">买一赠一</span>
</p>
<p class="weight">140g</p>
<p class="price_container">
<span class="now_price">￥7.9</span>
<span class="original_price">￥12</span>
</p>
<span class="add">+</span>
</a>
<% } %>
</script>
</body>
</html>
还是没看懂吧？下面解释一下
1.引入文件------运用百度模板，首先，我们需要先导入baiduTemplate.js文件。
01.jpg
2.放置代码段------页面中，模板块放在 <script> 中，设置type属性为text/template或text/html，用id标识
02.png
3.调用代码段------index.js文件中，第一个参数是模板script标签的id值，第二个参数是传给模板的数据(这里传的是最后想要数据的上一层)
03.jpg
4.调用代码段------插入到页面的指定容器中
04.jpg
05.模板使用语法
默认分隔符为<% %>，在<script>标签的开始和结束为止要使用<% %>。在变量部分要使用<%=变量 %>方式告知，这是一个变量。
05.jpg
这种方式也可以实现动态加载我们的页面，与上述效果一致。
GIF.gif
如果还是有点模糊，可以点击这个链接看一下，对百度模板介绍的比较详细http://baidufe.github.io/BaiduTemplate/
