2023-07-21T14:42:28.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>动态创建列表</h1>
<div id="box">
 <!--   <ul>
        <li>刘备</li>
    </ul>
-->
</div>



<script>


function my$(id){return document.getElementById(id)};


//获取元素
var box = my$("box");
//创建一组数据
var names = ["刘备","曹操","孙权","关羽"];
//添加ul元素
var ul = document.createElement("ul");
//添加 元素 到box内部
box.appendChild(ul);
//根据数组的项数往ul中添加数据
for(var i = 0; i < names.length; i++){
//每次都要生成一个新的li标签元素
var li = document.createElement("li");
//添加到ul对象内部
ul.appendChild(li);
//给每个生成的li元素添加内容
li.innerText = names[i];



}




</script>

</body>
</html>