DOM

最新推荐文章于 2024-05-29 14:49:47 发布

一瓶微风

最新推荐文章于 2024-05-29 14:49:47 发布

阅读量113

点赞数

本文链接：https://blog.youkuaiyun.com/BReezeFK/article/details/105026995

版权

appendChild()
语法：node.appendChild(node)
参数：node 节点对象

	<body>
	<ul id="ul1">
			<li id="li">我是1i元素</li>
			<li id="li1">我是li元素1</li>
			<li id="li2">我是li元素2</li>
			<li id="li3">我是li元素3</li>
			<li id="li4">我是li元素4</li>
		</ul>
		<ul id="ul2">
			<li id="li5">我是1i5元素</li>
		</ul>
	</body>
	<script type="text/javascript">
		var ul1 = document.getElementById("ul1");

		// 1.新创建一个1i元素 添加到父元素的最后	
		var newLi = document. createElement("li");
		newLi. innerText = "新建的li”
		u11. appendChild(newLi);

		// 2.如果要添加的元素原本就存在移动到父元素的最后
		var 113 = document. getElementById("li3");
		ul1. appendChild(1i2)

		// 3.如果要添加的元素有子元素 该元素及其子元素都移动到元素的最后面
		var u12 = document.getElementById("ul2");
		ul1.appendChild(ul2);
	</script>

insertBefore插入子元素
语法:父元素.insertBefore(参数1，参数2)
参数1 :需要新插入元素
参数2 :插入到哪个元素的前面

<body>
		<ul id="ul1">
			<li id="li">我是1i元素</li>
			<li id="li1">我是li元素1</li>
			<li id="li2">我是li元素2</li>
			<li id="li3">我是li元素3</li>
			<li id="li4">我是li元素4</li>
		</ul>
		<ul id="ul2">
			<li id="li5">我是1i5元素</li>
		</ul>
	</body>

	<script type="text/javascript">		
	//获取元素
		var ul1 = document.getElementById("ul1"); 
		var li3 = document.getElementById("li3");

		// 1.创建一个新元素，直接将新元素插入到指定的位置
		var newLi = document.createElement("li");
		newLi.innerText = "我是新创建的";
		ul1.insertBefore(newLi, li2);

		// 2.原本的就存在的元素移动到指定的位置
		var li2 = document.getElementById("li2");
		ul1.insertBefore(li2, li3)

		// 3. 需要插入的元素有子元素 元素及其子元素一起移动到指定位置
		var ul2 = document.getElementById("ul2");
		ul1.insertBefore(ul2, li3)
	</script>

removeChild移出子元素
语法: 父元素.removeChild(子元素)

	<body>
		<ul id="ul1">
			<li id="li">我是1i元素</li>
			<li id="li1">我是li元素1</li>
			<li id="li2">我是li元素2</li>
			<li id="li3">我是li元素3</li>
			<li id="li4">我是li元素4</li>
		</ul>
		<ul id="ul2">
			<li id="li5">我是1i5元素</li>
		</ul>
	</body>
	<script type="text/javascript">		
		//获取元素
		var ul1 = document.getElementById("ul1");
		var li5 = document.getElementById("li5");
		var li2 = document.getElementById("li2");

		// //1.元素不能调用该方法移除自己(不能自杀)
		// li. removeChild(li);

		// // 2.父元素不能移除其他元素的子元素(不能杀死别人的儿子)
		// // ul1. removeChild(li5)

		// 3.父元素只能移除自己的子元素
		ul1. removeChild(li2)
	</script>

replaceChild替换子元素
语法:父元素.replaceChild(参数1, 参数2)
参数 :
1 :就是要替换新元素参数
2 : 要被替换元素

	//       1.先创建的元素:
	//       2.原本就存在的元素:
	//       3.需要插入的元素有子元素

	<body>
		<ul id="ul1">
			<li id="li">我是1i元素</li>
			<li id="li1">我是li元素1</li>
			<li id="li2">我是li元素2</li>
			<li id="li3">我是li元素3</li>
			<li id="li4">我是li元素4</li>
		</ul>
		<ul id="ul2">
			<li id="li5">我是1i5元素</li>
		</ul>
	</body>
	
	<script type="text/javascript">
		//获取元素
		var ul1 = document.getElementById("ul1");
		var li3 = document.getElementById("li3");

		// 1.创建一个新元素，直接替换
		// var newLi = document.createElement("li");
		// newLi.innerText = "新创建的";

		// ul1.replaceChild(newLi, li3); 

		// 2.原本的就存在的元素把这个元素一 上去替换掉原本的元素
		// var li2 = document .getE lementById("li2");
		// ul1 .replaceChild(li2, li3)

		// 3.需要插入的元素有子元素 元素及其子元素一起移动上去，替换掉原本的元素
		// var ul2 = document.getElementById("ul2");
		// ul1.replaceChild(ul2, li4)
	</script>