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. javascript 简单语法 对象属性及方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 屌丝也能开发安卓版2048（App Inventor）

    想编写安卓游戏.java太难.来试试App Inventor.尽管有人觉得他是中学生的玩具,可是也能编写2048这种火爆游戏,不须要太复杂的算法. 整个游戏有几个模块: 一.游戏初始化 数列转化为图形 ...

  3. C++ STL之list具体解释

    list容器是一个双向链表,能够高效地进行插入删除元素. 构造函数 list<Elem> c;//空list list<int> c(3);//创建一个含有三个默认值是0的元素 ...

  4. [jzoj 5177] [NOIP2017提高组模拟6.28] TRAVEL 解题报告 （二分）

    题目链接: https://jzoj.net/senior/#main/show/5177 题目: 题解: 首先选出的泡泡怪一定是连续的一段 L,R 然后 L 一定属于虫洞左边界中的某一个 R 也同样 ...

  5. HttpWebRequest 表单提交

    /// <summary> /// http请求 /// </summary> public static class ZkWebRequestHelp { /// <s ...

  6. 转js resplace方法使用

    作者: hezhiwu5#163.com    时间:2007-3-22 大家好!!今晚在华软G43*宿舍没什么事做,把javascript中replace方法讲解一下,如果讲得不对或不合理是情理之中 ...

  7. windows2008 虚拟机64位的操作系统安装32位的应用程序

    64位的操作系统安装32位的应用程序: 安装成功但是使用有问题 报错: 最终解决: 在一台物理机的win7上面安装该软件. 然后把安装好的文件全部拷贝到win2008虚拟机上面 启动,使用 多ok了! ...

  8. 《Unix环境高级编程》读书笔记 第13章-守护进程

    1. 引言 守护进程是生存期长的一种进程.它们常常在系统引导装入时启动,仅在系统关闭时才终止.它们没有控制终端,在后台运行. 本章说明守护进程结构.如何编写守护进程程序.守护进程如何报告出错情况. 2 ...

  9. 妙用$.extend

    在js中,我们有时需要复制一个对象的值,而不是复制它的引用的时候,可以使用jquery的$.extend方法,简单代码如下 <script> var a = { "name&qu ...

  10. python登录注册改良版

    #在执行本脚本的时候,需要先注册,否则会报字符串不匹配sum=3while True: #如果条件为真,则一直循环 print("先注册,在登录") print("1.注 ...