js中appendChild()方法

最新推荐文章于 2024-04-11 18:33:15 发布

优雅1217

最新推荐文章于 2024-04-11 18:33:15 发布

阅读量3.5w

点赞数 28

分类专栏： DOM；前端 javascript 文章标签： javascript appendchild添加节点

本文链接：https://blog.csdn.net/baidu_36065997/article/details/78622721

版权

javascript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

DOM；前端

3 篇文章 0 订阅

订阅专栏

appendChild(Node)这个方法一般是在指定元素节点的最后一个子节点之后添加节点，但如果Node是页面中的DOM对象，那么就不是添加节点了，就是直接Move节点。

① 创建原来没有的节点

<body>
	<ul>
		<li>苹果</li>
		<li>香蕉</li>
		<li>橘子</li>
	</ul>
</body>
<script>
	window.onload = function(){
		//定义一个快捷方式
		function $(name){
			return document.getElementsByTagName(name);
		}
		//创建一个新的节点
		var li = document.createElement("li");
		li.innerHTML="柚子";
		$('ul')[0].appendChild(li);
	}
</script>

得到的结果：

② 添加的节点是页面中原有的DOM对象

<body>
	<ul>
		<li>苹果</li>
		<li>香蕉</li>
		<li>橘子</li>
	</ul>
</body>
<script>
	window.onload = function(){
		//定义一个快捷方式
		function $(name){
			return document.getElementsByTagName(name);
		}
		//创建一个新的节点
		var li = $('ul')[0].children[0];
		$('ul')[0].appendChild(li);
	}
</script>

得到的结果：

如果要添加的节点是网页中的DOM对象，这时直接用appendChild()方法会移动NODE节点，因此解决这种问题的办法是

1.先使用cloneNode();克隆一下节点

2.之后使用appendChild();

下面的代码是博主做的一个简易的显示界面，点击左边的小图标右边会显示大图。写这段代码的时候就遇到这个问题，因此把这个问题写下来希望自己下次能够细心一点也希望能帮助到有需要的人。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片显示</title>
	<style>
		ul{
			list-style: none;
			padding: 0;
            margin: 0;
		}
		.left{
			float: left;
		    margin-left: 50px;
		    margin-top: 20px;
		}
		.left img{
			width: 200px;
		}
		.show{
			float: left;
			border: 1px solid #ccc;
		    width: 600px;
		    height: 400px;
		    margin-left: 70px;
		    margin-top: 185px;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="left">
			<ul>
				<li><img src="image/1.jpg" alt="图片1"></li>
				<li><img src="image/2.jpg" alt="图片2"></li>
				<li><img src="image/3.jpg" alt="图片3"></li>
				<li><img src="image/4.jpg" alt="图片4"></li>
				<li><img src="image/5.jpg" alt="图片5"></li>
			</ul>
		</div>
		<div class="show">
			
		</div>
	</div>
</body>
<script>
	window.onload = function(){
		function $(name){
			return document.getElementsByClassName(name)[0];
		}
		var uls = $('left').children;
		var lis = uls[0].children;
		var length = lis.length;
		var show  = $('show');
		var ul = document.createElement('ul');
		show.append(ul);
		var sul = show.children;
	    sul[0].className = 'sul';
		for(var i=0;i<length;i++){
			lis[i].onclick = function(){
				$('sul').innerHTML = '';
				var that = this.cloneNode(true);
				$('sul').append(that);
			}
		}
	}
</script>
</html>

优雅1217

关注

28
点赞
踩
67

收藏

觉得还不错? 一键收藏
3
评论
js中appendChild()方法

appendChild(Node)这个方法一般是在指定元素节点的最后一个子节点之后添加节点，但如果Node是页面中的DOM对象，那么就不是添加节点了，就是直接Move节点。 ① 创建原来没有的节点苹果香蕉橘子 window.onload = function(){ //定义一个快捷方式 function $(name){ return
复制链接

扫一扫

专栏目录