最通俗易懂的超级无敌简单的HTML表格添加功能案例

酿豆腐超级好吃

已于 2022-10-22 11:35:42 修改

阅读量497

点赞数

文章标签： html css 前端

于 2022-10-22 11:34:14 首次发布

本文链接：https://blog.csdn.net/a825771734/article/details/127459613

版权

HTML JavaScript DOM操作动态添加内容前端开发

关键词由CSDN通过智能技术生成

背景

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>