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. Maven传递依赖的时候，同名包不同版本号的包均会下载，可是编译的时候，仅仅会载入一个高版本号的。

    描写叙述,在一个Maven项目中.同一时候依赖了spring-tomcat-weaver  和  struts-core 包.可是spring-tomcat-weaver 须要commons-dige ...

  2. 公司--下载svg图片

    加载本地svg图片: SVGParserRenderer norDrawable = OtherPageConfigsManager.getInstance().getSVGParserRendere ...

  3. m_Orchestrate learning system---十四、数据表中字段命名规则

    m_Orchestrate learning system---十四.数据表中字段命名规则 一.总结 一句话总结:a.保证唯一 b.见名知意 1.注意php中的数组类函数和字符串类函数的前缀? 数组类 ...

  4. IEEE的论文需要注意的一些

    详细看最近的IEEE会议模板的时候,忽然注意到表的注序号应该用字母:另外,引用未发表的论文,如果是archive上的要使用archive规定的方法,或者标注``unpublished''

  5. 虚拟机CentOS6.8下安装JDK

    CentOS6.8下 首先下载JDK,执行命令如下: wget http://download.oracle.com/otn-pub/java/jdk/8u172-b11/a58eab1ec24242 ...

  6. C++ 获取某一文件夹下的所有文件名

    //********************************************************************** // Method: 获取文件夹下所有文件 // Fu ...

  7. SpringCloud学习笔记（18）----Spring Cloud Netflix之服务网关Zuul原理

    1. Zuul的工作机制 Zuul提供了一个框架,可以对过滤器进行动态的加载,编译,运行.过滤器之间没有直接的相互通信,他们是通过一个RequestContext的静态类来进行数据传递的.Requet ...

  8. PyQuery使用

    PyQuery库是一个非常强大的网页解析库,如果你有前端开发经验的,都应该接触过jQuery,那么PyQuery就是你非常绝佳的选择,PyQuery 是 Python 仿照 jQuery 的严格实现. ...

  9. npm包的上传npm包的步骤，与更新和下载步骤

    官网: ======================================================= 没有账号可以先注册一个,右上角点击“Sign Up",有账号直接点击“ ...

  10. Vue组件通信之Bus

    关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里. 在vue2.0中 $dispatch 和 $broadcast 已经被弃用.官方文档中给出的解释是: 因为基 ...