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

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