老师,为啥加入的div标签失败了?
来源:2-10 首页-商家列表(4)
weixin_慕设计6449438
2019-06-25 23:36:05
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width:100%;
height:1200px;
background:red;
}
.inner{
width:100%;
height:100px;
line-height: 100px;
background:yellow;
color:blue;
text-align: center;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
<script>
//模板
var list='<div class="inner">$name</div>';
//需要调用的数据的数组
var arr=[
{code: 101072, name: "地方菜", url: "http://p1.meituan.net/jungle/b6033c2f9aa26cdf37ea24fb1346d2dc4690.png", gray_url: "http://p1.meituan.net/jungle/461a24456d08b3078d06b00fa48c479f6639.png", gray_switch: 0},
{code: 100182, name: "免配送费", url: "http://p0.meituan.net/jungle/f5ef975cae40ecc1a21dae61f44575d59129.png", gray_url: "http://p1.meituan.net/jungle/461a24456d08b3078d06b00fa48c479f6639.png", gray_switch: 0},
{code: 100179, name: "新商家", url: "http://p1.meituan.net/jungle/d24bda7352a2af54dded09bdf532055b9416.png", gray_url: "http://p1.meituan.net/jungle/d9fa3bf08f16ab2777172f0ae3be34af6827.png", gray_switch: 0},
{code: 100252, name: "炸鸡零食", url: "http://p0.meituan.net/jungle/0ce9a33a4accc536ac9e2d8d91951c924673.png", gray_url: "http://p1.meituan.net/jungle/461a24456d08b3078d06b00fa48c479f6639.png", gray_switch: 0},
{code: 1073, name: "日韩料理", url: "http://p0.meituan.net/jungle/99f0d73d4b47490cda27df873f415ebf4891.png", gray_url: "http://p0.meituan.net/jungle/ca853b7c6edc2ee64b313824f2e90e056892.png", gray_switch: 0},
{code: 101073, name: "鲜花蛋糕", url: "http://p1.meituan.net/jungle/76f6523e25c16df8641717ae1518c0235859.png", gray_url: "http://p1.meituan.net/jungle/461a24456d08b3078d06b00fa48c479f6639.png", gray_switch: 0},
{code: 100183, name: "粥粉面", url: "http://p1.meituan.net/jungle/3dfc65491265db3ffd14b8d4d3240d3a4123.png", gray_url: "http://p1.meituan.net/jungle/d9fa3bf08f16ab2777172f0ae3be34af6827.png", gray_switch: 0},
];
arr.forEach(function (item, index) {
var str = list.replace('$name', item.name); //采用这个方法就会遍历出7个<div class="inner">$name</div>这样的模板出来
var box=document.getElementById('box');
box.append(str);
// console.log(str);
// console.log(box);
});
</script>
</html>
1回答
你好,是append方法的原因,不会解析标签,所以将字符串显示出来了,可以换成innerHTML属性,参考:
自己测试下,祝学习愉快!
相似问题
回答 2
回答 1