insertBefore的用法，以及注意事项，并且模仿编写insertAfter()方法

DOM提供的一个名为insertBefore()的方法，用来将一个新元素插入到现有的元素的前面。

使用这个方法的条件：

  • 想插入的新元素是谁newElement，我们创建的元素
  • 插入到谁的前面
  • 2个元素拥有共同的父级，这是这个方法的关键，即使新元素和已经存在的元素是同级的，那么他们一定有共同的父级，最基本的父级那就是body 
     <!DOCTYPE html>
    
 <html>
    
 <head>
    
     <script type="text/javascript">
    
     window.onload = function() {
    
     var oBox = document.getElementById("box");
    
     var img = document.createElement("img");
    
     img.setAttribute("src","img/aa.jpg");
    
     img.setAttribute("alt","图片");
    
     img.setAttribute("title","大佛");
    
     /*必须有共同的父节点,即使都没有在其他盒子里面，那最起码的父节点就是body*/
    
     oBox.parentNode.insertBefore(img,oBox);
    
     }
    
 </script>
    
 </head>
    
 <body>
    
     <div id="box">
    
     <p>111</p>
    
     <p>222</p>
    
     </div>
    
 </body>
    
 </html>

    这里在box前面插入一个元素，那么他们的共同父级就是Body，这是毫无疑问的，因此这里必须使用parentNode这个属性

下面模仿上面的insertBefore方法，来写DOM并没有提供的insertAfter方法

 function insertAfter(newElement,targetElement) {

     //拿到要插入节点的父节点

     var parent = targetElement.parentNode;

     if(parent.lastChild == targetElement) {

         parent.appendChild(newElement);

     } else {
          parent.insertBefore(newElement,targetElement.nextSibling);

     }

 }

js之insertBefore(newElement,oldElement)的更多相关文章

  1. 廖雪峰js教程笔记13 插入DOM

    当我们获得了某个DOM节点,想在这个DOM节点内插入新的DOM,应该如何做? 如果这个DOM节点是空的,例如,<div></div>,那么,直接使用innerHTML = '& ...

  2. JS脚本收藏（一些实用的函数）

    一.共享onload事件 这个函数的名字是addLoadEvent,它是由Simon Willison 编写的.它只有一个参数:打算在页面加载完毕时执行的函数的名字. 下面是addLoadEvent函 ...

  3. js模拟高级语言的重载

    js以递归的方式模拟高级语言的重载,我以添加元素节点为例子: //现有的子元素之前插入一个新的子元素 var before = function(elem,newElement,targetEleme ...

  4. 关于ajaxfileupload.js一些问题和上传图片就立即显示图片功能

    ajaxfileupload.js是上传文件的一个插件,最近碰到的一个问题是在谷歌浏览器上传文件之后,原文本框中的文件名称消失,网上搜了好长时间也没有十分满意的答案.无刷新上传文件我想到的只有ajax ...

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

    在JS图片库的第五版开发完后http://www.cnblogs.com/GreenLeaves/p/5691797.html#js_Five_Version我们发现一个问题,就是假设在图片列表之后还 ...

  6. 【js编程艺术】小制作五

    1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  7. 【js 编程艺术】小制作一

    最近在看js编程艺术,照葫芦画瓢,做了一个小网页.作为一枚前端渣渣,遇到了好多坑,在这里就不提了. 首先是html代码 /*gallery.html*/<!DOCTYPE html> &l ...

  8. ajaxFileUpload.js 无刷新上传图片，支持多个参数同时上传，支持 ie6-ie10

    /* 131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie10 依赖:jquery-1.6.1.min.js 主方法:ajaxFileUpl ...

  9. JS插入新的节点

    insertBefore() 语法: insertBefore(newchild,refchild) newchild 插入新的节点 refchild 在此节点前插入新节点 <ul id=&qu ...

随机推荐

  1. linux定时备份mysql数据库文件

    1.设定定时器:终端敲入:crontab -e命令 2,然后写入     00 23 * * * /home/db_bak_file/dbbak.sh >>/home/db_bak_fil ...

  2. ibatis annotations 注解方式返回刚插入的自增长主键ID的值--转

    原文地址:http://www.blogs8.cn/posts/WWpt35l mybatis提供了注解方式编写sql,省去了配置并编写xml mapper文件的麻烦,今天遇到了获取自增长主键返回值的 ...

  3. C# 比较两个数据的不同

    string[] arrRate = new string[] { "op1010", "op1020", "op1030", " ...

  4. 004.ES2015和ES2016新特性--块级作用域变量

    其基本原理就是JavaScript的作用域链,下面以对比的方式来展示一下函数级作用域和块级作用域. 函数级作用域 var fns = []; for (var i = 0; i < 5 ; i+ ...

  5. *hiho 1475 - 数组拆分，dp，由N^2降到NlogN

    题目链接 描述 小Ho得到了一个数组作为他的新年礼物,他非常喜欢这个数组! 在仔细研究了几天之后,小Ho成功的将这个数组拆成了若干段,并且每段的和都不为0! 现在小Ho希望知道,这样的拆分方法一共有多 ...

  6. javascript 异或运算符实现简单的密码加密功能

    写在前面的 当我们需要在数据库中存储用户的密码时,当然是不能明文存储的. 我们就是介绍一下用^运算符来实现简单的密码加密以及解密功能 上代码 首先,回顾一下基础知识. String.fromCharc ...

  7. axios使用方法

    npm install axios 创建文件夹api/index.js import axios from 'axios'; let http = axios.create({ baseURL: '' ...

  8. HDU 1667 The Rotation Game (A*迭代搜索)

    题目大意:略 每次选择一个最大深度K,跑IDA* 估价函数H=8-中间8个格里出现次数最多的数的个数x,即把它填满这个数最少需要8-x次操作,如果dep+H>K,就跳出.. 深搜的时候暴力修改, ...

  9. BZOJ 1085 / LOJ 2151 [SCOI2005]骑士精神 (剪枝/A*迭代搜索)

    题目大意:略 直接爆搜会T,我们优化一下,统计出当前棋盘和目标棋盘不同的位置的数量k,那么当前棋盘变成目标棋盘最少的移动次数是k-1 每次选择一个最大深度ma,那么如果当前走了dep步,显然必须保证d ...

  10. CentOS 6.5 安装 ffmpeg

    CentOS 6.5 安装 ffmpeg 满满的坑   http://download.videolan.org/pub/videolan/x264/snapshots/     安装ffmpeg   ...