js中appendChild()方法

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="data:image/1.jpg" alt="图片1"></li><li><img src="data:image/2.jpg" alt="图片2"></li><li><img src="data:image/3.jpg" alt="图片3"></li><li><img src="data:image/4.jpg" alt="图片4"></li><li><img src="data: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>

js中appendChild()方法相关推荐

JS中toFixed()方法的问题及解决方案
JS中toFixed()方法的问题及解决方案参考文章: (1)JS中toFixed()方法的问题及解决方案 (2)https://www.cnblogs.com/gushen/archive/201 ...
js中toFixed方法的两个坑
js中toFixed方法的两个坑 toFixed返回结果是string,后续使用它计算会错误 toFixed返回结果可能出现负零-0.00 toFixed返回结果是string,后续使用它计算会错误 ...
Js中fetch方法
Js中fetch方法 fetch()方法定义在Window对象以及WorkerGlobalScope对象上,用于发起获取资源的请求,其返回一个Promise对象,这个Promise对象会在请求响应后被 ...
created写法_vue.js中created方法作用
这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数.一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中.每一个阶段都会有一个钩子函数 ...
【转载】JS中bind方法与函数柯里化
原生bind方法不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...
前端开发：JS中join()方法的使用总结
前言在前端开发过程中,对数组的数据进行处理也是比较常见的操作之一,而且对数组进行操作的频率远远大于对对象进行操作,因此在开发过程中对于数组里面的数据进行处理是一项比较重要的技能,尤其是对于刚入行的 ...
vue在created调用点击方法_vue.js中created方法的使用详解
这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下. 这是它的一个生命周期钩子函数,就是一个vue实例被生成 ...
js中eval方法的使用
2.js中eval方法的使用 eval可以执行传入的字符串,比如:eval("console.log('eval test!')"),控制台直接会输出"eval test ...
JS中sort方法排序
JS中sort方法排序一.数字排序(string类型) 二.数字排序(string类型和number类型) 三.混合排序(string.number和字母) 四.函数排序五.数组对象排序一.数字 ...

js中appendChild()方法

js中appendChild()方法相关推荐

最新文章

热门文章