JS 案例-添加节点

最新推荐文章于 2024-03-22 21:02:12 发布

a_worm

最新推荐文章于 2024-03-22 21:02:12 发布

阅读量522

点赞数

分类专栏：技能-前台文章标签： javaScript DOM

本文链接：https://blog.csdn.net/cuigaochong/article/details/48183777

版权

本文探讨了如何在JavaScript中使用DOM操作来添加新的li节点到ul列表中，重点在于检查和节点插入的过程。

摘要由CSDN通过智能技术生成

需求：点击 submit 按钮时,　检查是否选择 type, 若没有选择给出提示: "请选择类型"; 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容";

若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点

代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

	<script type="text/javascript">
	
		window.onload = function()
		{
			function showFunction(liNode)
			{
				alert(liNode.firstChild.nodeValue);
			}
		     
			//点击每个li出现每个li的nodeValue
			var liNodes = document.getElementsByTagName("li");
			for(var i = 0;i<liNodes.length;i++)
			{
				liNodes[i].onclick = function()
				{
					showFunction(this);
				};
			}

最低0.47元/天解锁文章

a_worm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 案例-添加节点

需求：点击 submit 按钮时,　检查是否选择 type, 若没有选择给出提示: "请选择类型"; 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容"; 若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点代码实现：Insert title here window.onload = function()
复制链接

扫一扫

专栏目录