JavaScript之insertBefore()和自定义insertAfter()的用法。

在JS图片库的第五版开发完后http://www.cnblogs.com/GreenLeaves/p/5691797.html#js_Five_Version我们发现一个问题,就是假设在图片列表之后还有其他的元素,这个时候貌似就没有办法了,我们的真实想法是,让新创建的元素紧更在图片列表的后面,而不管这个列表出现在文档的那个地方.下面我们就来介绍两个方法来帮助解决这个问题。

1、insertBefore()

DOM提供了名为inerBefore()的方法,这个方法的作用是:把一个新元素插入到一个现有元素前面,而调用此方法时,你必须告诉它三件事。

(1)、newElement:你想插入的元素。

(2)、targetElement:你想把新元素插入到哪个元素(targetElement)之前。

(3)、parentElement:目标元素的父元素;  parentElement=targetElement.parentNode;

下面是调用的语法:

parentElement.insertBefore(newElement,targrtElement);

所以我们的图片库的代码可以这样换:

var gallery=document.getElementById("imagegallery");

gallery.parentNode.insertBefore(placeholder,gallery);

这种效果也不错,但是我们将新创建的图片展示舞台放到了图片清单的前面而不是我们要求的后面;所以方法仍需要改进,我们需要插到后面!

2、insertAfter()

大多数人会想,既然有insertBefore()方法肯定会有insertAfter()方法,很可惜这个方法,DOM并没有提供,但是我们却可以利用DOM所提供方法和属性来自定义一个inserAfter()方法;代码如下:

        function insertAfter(newElement, targetElement) {
            /*
            编写逻辑
            1、首先找到给出我们需要插入的元素和用来定位的目标元素
            2、根据目标元素找到两个元素的父元素
            3、判断目标元素是不是父元素内的唯一的元素.
            4、如果是,向父元素执行追加操作,就是appendChild(newElement)
            5、如果不是,向目标元素的之后的紧接着的节点之前执行inserBefore()操作
            */
            var parentElement = targetElement.parentNode; //find parent element
            if (parentElement.lastChild == targetElement)//To determime确定,下决心 whether the last element of the parent element is the same as the target element 
            {
                parentElement.appendChild(newElement);
            } else {
                parentElement.insertBefore(newElement, targetElement.nextSibling);
            }
        }

 这个自定义的insertAfter()可以和之前随笔中的共享onload方法http://www.cnblogs.com/GreenLeaves/p/5726271.html

一起加入到我们自己的类库中方便开发调用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Pythonista

Golang实现一个密码生成器

20330
来自专栏木子昭的博客

Javascript常用API备忘录

Bom常见API 获取浏览器信息 var ua = navigator.userAgent if (ua.indexOf('Chrome')){ co...

31730
来自专栏xingoo, 一个梦想做发明家的程序员

希尔排序

希尔排序的时间复杂度,最好的情况下仍然是正序时,可达到O(n),平均复杂度为O(nlogn)。 算法思想: 采用跳跃式处理数组,使得数组粗粒度的实现基本有序。...

21650
来自专栏十月梦想

多个Promise对象的处理

如果某件事情需要依照多个对象完成后才能执行,那么我们可以使用Promise.all来管理,将这些状态全部执行完毕后才执行下一个!

15710
来自专栏章鱼的慢慢技术路

Go语言_iota用法

在每一个const关键字出现时,被重置为0,然后再下一个const出现之前,每出现一次iota,其所代表的数字会自动增加1。

7110
来自专栏Golang语言社区

Golang语言--slice 切片原理

golang 中的 slice 非常强大,让数组操作非常方便高效。在开发中不定长度表示的数组全部都是 slice 。但是很多同学对slice 的模糊认识,造成认...

39990
来自专栏偏前端工程师的驿站

JS魔法堂:追忆那些原始的选择器

一、前言                                                                            ...

24870
来自专栏前端小叙

js操作DOM在父元素中的结尾添加子节点注意

所以js是不能直接传入字符串的,但是jquery的append可以直接传入html字符串。

18340
来自专栏前端说吧

Sass-学习笔记【进阶篇】

59880
来自专栏信安之路

【作者投稿】PHP代码审计-sprintf函数中的安全问题

看到一篇WorldPress注入漏洞分析,其中sprintf单引号逃逸的思路很巧妙,在此对这类函数做一些简单的测试和总结。

8400

扫码关注云+社区

领取腾讯云代金券