背景
1、有元素ol、li;
2、需要将内容添加到li元素;
3、点击添加按钮,输入内容,点击确定即可添加。
主要流程
以上流程描述了最简单的添加过程。
简化流程
简化流程帮助更好的理解数据的流向。
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML增加功能测试</title>
</head>
<script>
window.onload=function(){
var btn =document.getElementsByTagName("button")[0];
btn.onclick=function(){
var name=prompt("请输入内容");
var li=document.createElement("li");
li.innerText=name;
var ol=document.getElementsByTagName("ol")[0];
ol.appendChild(li);
}
}
</script>
<body>
<ol>
<li>三国演义</li>
</ol>
<button>添加</button>
</body>
</html>