老师,为啥加入的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回答

好帮手慕星星

2019-06-26

你好,是append方法的原因,不会解析标签,所以将字符串显示出来了,可以换成innerHTML属性,参考:

http://img.mukewang.com/climg/5d130d840001d08005930241.jpg

自己测试下,祝学习愉快!

0
heixin_慕设计6449438
h 懂啦!谢老师!
h019-06-26
共3条回复

0 学习 · 6815 问题

查看课程