web前端学习笔记23-Node节点方法、元素节点方法、属性节点方法

最新推荐文章于 2022-06-29 13:06:09 发布

喵了个咪蛋儿

最新推荐文章于 2022-06-29 13:06:09 发布

阅读量252

点赞数

分类专栏： web前端学习文章标签： javascript js html html5

本文链接：https://blog.csdn.net/weixin_42727838/article/details/107639777

版权

一、Node节点对象的基本方法

关键字	释义	格式
appendChild	在父节点的子节点列表的最后插入指定的节点	`父节点.appendChild(要插入的子节点)`
inserBefore	在父节点的子节点列表的指定子节点之前插入新的节点	`父节点.inserBefore(要插入的节点,定位的节点)`
replaceChild	使用新节点替换指定的节点	`父节点.replaceChild(新节点,被替换的节点)`
removeChild	移除指定的子节点	`父节点.removeChild(要被移除的子节点)`
cloneNode	克隆节点	`节点.cloneNode()` 仅仅可以当前元素节点本身 `节点.cloneNode(true)` 克隆当前节点及当前节点的内部所有节点

<body>
	<button onclick="addHr1()">在最后添加节点</button>
	<button onclick="addHr2()">在某节点前添加节点</button>
	<button onclick="replaceNode()">替换节点</button>
	<button onclick="ycNode()">移除节点</button>
	<button onclick="copyNode()">克隆节点</button>
	<div id="jiangnan">
		<span>谁取柳绿轻柔</span>
		<span id="text2">谁饰白云朵朵</span>
		<span id="text3">谁敛桃的嫣红</span>
		<span id="text4">谁涂幽香碧荷</span>
		<span>江南烟雨绘画一帘幽梦</span>			
	</div>
	<script>
		// Node节点对象基本方法
		var jn=document.getElementById('jiangnan');
		console.log(jn);
		
		// 在最后添加节点————————————————————————————————————————
		// appendChild()在父节点的子节点列表的最后插入指定的节点
		function addHr1(){