模板引擎

最新推荐文章于 2024-07-22 15:13:59 发布

Kane_qqq

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量81

点赞数

本文链接：https://blog.csdn.net/Kane_qqq/article/details/124661864

版权

<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>