JS-DOM对象替换节点与克隆节点

最新推荐文章于 2025-05-24 23:52:24 发布

原创最新推荐文章于 2025-05-24 23:52:24 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

学习总结专栏收录该内容

24 篇文章

订阅专栏

本文介绍了JavaScript DOM对象中关于替换节点和克隆节点的操作，以及讲解了innerHTML与innerText属性的区别，是理解JS操作DOM的重要内容。

JS-DOM对象

替换节点

替换节点:
		父节点.replaceChild(节点1,节点2)
		节点1:是新节点
		节点2:老节点
		返回值被替换额节点
		如果新节点为父节点中已有节点,效果为老节点删除,被替换成为新节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul id="box">
			<li>苹果</li>
			<li>香蕉</li>
			<li>橘子</li>
			<li>菠萝</li>
		</ul>
		<script>
			// 获取节点
			var box=document.getElementById("box");
			// 创建一个新的li节点
			var newli=document.createElement("li");
			newli.innerHTML="越努力越幸运!!!";
			console.log(newli);
			// 替换节点,返回被替换的节点
			console.log(box.replaceChild(newli,box.firstElementChild));
			
		</script>
	</body>
</html>

克隆节点

节点.cloneNode(boolean) 克隆节点
				true   当前节点包含其字内容全部克隆
				false  只克隆当前节点,属性+属性值会克隆,id值也会相同需要修改
				html属性,css样式+js功能如果定义在标签上标签上的内容都会被克隆,但是js中的css中单独的语法,不会被克隆

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul id="src_ul">
		<li>red</li>
		<li>yellow</li>
		<li>blue</li>
	</ul>
	<button onclick="copy();">复制</button>
	<hr />
	<div id="copy_div"></div>

	<script type="text/javascript">
		function copy() {
			// 获取要复制的元素
			var src_ul = document.getElementById("src_ul");
			// 复制 true深度克隆，可以克隆结构和内容
			var copy_ul = src_ul.cloneNode(true);
			// 将复制好的内容添加到div中
			document.getElementById("copy_div").appendChild(copy_ul);
		}
	</script>
	</body>
</html>

innerHTML与innerText的区别

innerHTML可以往标签中添加|读取html节点
innerText只能读取或添加文本内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="div1"><p>div1</p></div>
		<div class="div2"><p>div2</p></div>
		
		<script>
			/* 分别获取2个div标签对中的内容 */
			var div1=document.getElementsByClassName("div1")[0];
			var div2=document.getElementsByClassName("div2")[0];
			console.log(div1.innerHTML);
			console.log(div2.innerText);
			/* 设置2个div标签对中的内容 */   
			//覆盖
			 div1.innerHTML="哈哈我是div1";
			div2.innerText = "呵呵我是div2"; 
			
			//区别
			//innerHTML可以往标签中添加|读取html节点
			div1.innerHTML+="<h1>我是标题div1</h1>";  //追加 += 在原内容基础上追加
			//innerText只能读取或添加文本内容
			div2.innerText+="<h1>我是标题div2</h1>"; 
		</script>
	</body>
</html>