<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>
模板引擎
最新推荐文章于 2022-06-30 01:20:23 发布