document操作标签对象的其他方法

最新推荐文章于 2022-07-01 15:03:44 发布

\u5f20\u7231\u9648

最新推荐文章于 2022-07-01 15:03:44 发布

阅读量770

点赞数

本文链接：https://blog.csdn.net/family_love_1998/article/details/89846998

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>document操作标签对象的其他方法</title>
		<script>
			/**
			 * 文档对象：document
			 * 和添加元素对象相关的方法
			 *    document.createElement("标签元素名称");
			 *   举例：创建<input/> document.createElement("input");
			 *      setAttribute("属性名称","属性值");
			 *        举例：元素对象.setAttribute("type",'button');
			 *        <input type="button"/>
			 * 和插入相关的方法
			 *     appendChild(指定元素对象);在父节点中调用
			 *     insertBefore(新元素对象，指定元素对象);在指定对象的前面插入这个新对象
			 * 和删除相关的方法
			 *     removeChild(子节点对象);
			 */
			function addButton(){
				//创建一个标签对象：input标签对象
				var input = document.createElement("input"); //<input/>
				//给当前input对象中添加属性
				input.setAttribute("type","button");
				input.setAttribute("value","新按钮");   //<input type="button"value="新按钮"/>
				//appendChild(指定元素对象);在父节点中调用
				//获取父节点对象：body
				var bodyNode = document.getElementsByTagName("body")[0];
				bodyNode.appendChild(input);
				//获取id="btn"所在的标签对象
				/*var btnNode = document.getElementById("btn");
				bodyNode.insertBefore(input,btnNode);*/
			}
			function delButton(){
				//现获取父节点对象
				var bodyNode = document.getElementsByTagName("body")[0];
				//通过bodyNode获取最后一个子节点对象
				var last = bodyNode.lastChild;
				bodyNode.removeChild(last);
			}
		</script>
	</head>
	<body>
		<input type="button"value="添加"onclick="addButton()"/><input type="button"id="btn"value="按钮" /> 
		<input type="button"value="删除"onclick="delButton()" />
		<input type="button"id="btn"value="按钮" />
	</body>
</html>

\u5f20\u7231\u9648

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
document操作标签对象的其他方法

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>document操作标签对象的其他方法</title> <script> /** * 文档对象：document * 和添加元素对象相关的方法 * ...
复制链接

扫一扫