模板引擎

<body>
    <div>
        <ul id="list">
            <li>
                <div class="hd">小明的基本信息</div>
                <div>
                    <p>姓名:小明</p>
                    <p>年龄:12</p>
                    <p>性别:男</p>
                </div>
            </li>
        </ul>
    </div>
    <script>
        var arr = [
            {"name":"小明","age":12,"sex":"男"},
            {"name":"小红","age":11,"sex":"女"},
            {"name":"小强","age":13,"sex":"男"}
        ]

        //方法一  原生DOM
        var list = document.getElementById("list")
        for (var i=0 ; i < arr.length ; i++){
            let oLi = document.createElement("li")
            oLi.innerText = arr[i].name
            list.appendChild(oLi)
        }

        //方法二 数组join()法  正常字符串没有换行的感觉,用join可以达到。每遍历一项,就以字符串                
        的视角将HTML字符串添加到list中。
        var list = document.getElementById("list")
        for (var i=0 ; i < arr.length ; i++){
            list.innerHTML += [
                '<li>',
                '   <div class="hd">'+ arr[i].name +'的信息</div>',
                '       <div>',
                '           <p>姓名:' + arr[i].name + '</p>',
                '           <p>年龄:'+ arr[i].age +'</p>',
                '           <p>性别:'+ arr[i].sex +'</p>',
                '       </div>',
                '</li>'
            ].join('')
        }

        //方法三 模版字符串 每遍历一项,就以字符串的视角将HTML字符串添加到list中。
        var list = document.getElementById("list")
        for (var i=0 ; i < arr.length ; i++){
            list.innerHTML += `
                <li>
                   <div class="hd"> ${arr[i].name} 的信息</div>
                       <div>
                           <p>姓名:${arr[i].name} </p>
                           <p>年龄:${arr[i].age} </p>
                           <p>性别: ${arr[i].sex} </p>
                       </div>
                </li>
            `
        }


    </script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值