您现在的位置是:首页 > 正文

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

2024-04-01 02:00:11阅读 2

在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

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

网站文章

  • C++函数重载/运算符重载/函数对象/谓词/内建函数对象

    C++函数重载/运算符重载/函数对象/谓词/内建函数对象

    我们可以通过自己写成员函数来实现加号运算符的重载。但是这样呢,咱们写的函数名可能不同。这样就不统一了,所以的编译器就给我们取了一个通用的名字:operator+(oper-操作 + ator-表人 -> 操作数)。编译器还给咱们一个小礼物,我们可以不用调用这个函数了,直接用 + (当然这只是简化了,肯定调用了我们写的函数)

    2024-04-01 01:59:47
  • 网页设计中JS与Java的区别

    在各种网页制作技术论坛中,常常有人询问javascript与Java有什么区别,甚至有人误认为javascript就是Java.javascript与Java确实有一定的联系,但它们并不像我们想象的那样联系紧密,甚至可以肯定地说它们有很大的区别.什么是JavaScript ?JavaScript 是对 ECMA 262 语言规范的一种实现.本教程的目的就是引导您学习使用 JavaScrip...

    2024-04-01 01:59:40
  • 错误 LNK2038 检测到“_ITERATOR_DEBUG_LEVEL”的不匹配项: 值“2”不匹配值“0”(main.obj 中)

    错误 LNK2038 检测到“_ITERATOR_DEBUG_LEVEL”的不匹配项: 值“2”不匹配值“0”(main.obj 中)

    vs2019编译报错:错误 LNK2038 检测到“_ITERATOR_DEBUG_LEVEL”的不匹配项: 值“2”不匹配值“0”(main.obj 中)

    2024-04-01 01:59:33
  • javacv实现音频文件转码g711a

    javacv实现音频文件转码g711a

    javacv 调用ffmgeg实现转码.输出g771a编码文件,gb28181

    2024-04-01 01:59:09
  • Boost.Asio C++ 网络编程之三:计时器

    引言文章的内容是翻译 《Boost.Asio C++ Network Programming》这本书。编译IDE环境是 vs2017计时器一些I/O操作需要一个超时时间。它只能应用在异步操作上(同步意味着阻塞,因此没有超时时间)。例如,下一条信息必须在100毫秒内从你的同伴那传递给你。bool read = false;void deadline_handler(const boost...

    2024-04-01 01:59:02
  • 1. 两数之和

    你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里不能重复出现。因为 nums[0] + nums[1] == 9 ,返回 [0, 1]。使用unordered_map (无序的map)集合存储整个数组,可以在logn的时间内找出。整数,并返回它们的数组下标。你可以想出一个时间复杂度小于。你可以按任意顺序返回答案。,请你在该数组中找出。

    2024-04-01 01:58:55
  • github访问失败的问题

    github访问失败的问题找到hosts文件。地址:C:\Windows\System32\Drivers\etc修改hosts文件。#github0.0.0.0 github.com0.0.0.0 ...

    2024-04-01 01:58:49
  • Qt 路径问题

    本文章意在方便自己使用,随时更新???? 表示对资源的引用,引用资源文件路径 如“:/res/demo.png” 表示资源文件里面定义的文件demo.png

    2024-04-01 01:58:25
  • CentOS裁剪

    裁剪都基于CentOS6.3 64位操作,以下是自己总结出的裁剪步骤:

    2024-04-01 01:58:18
  • 设计Rectangle类表示矩形

    设计Rectangle类表示矩形

    2024-04-01 01:58:10