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. 在Redhat Linux中执行非Redhat的Openstack, Redhat将对其Linux不提供支持

    一声叹息. IBM.HP.Dell, Mirantis, Piston等.请问.你们还把你们的Openstack部署在Redhat中吗? http://blogs.wsj.com/digits/201 ...

  2. UVa 12716 GCD XOR （简单证明）

    题意: 问 gcd(i,j) = i ^ j  的对数(j <=i <= N ) N的范围为30000000,有10000组例子 思路:GCD(a,b) = a^b = c GCD(a/c ...

  3. threejs 入门教程1

    最近在看threejs开发指南,总结一下制作最基础的3d场景的8步: 1. 设置场景大小 2. 创建WebGl渲染器 3. 指定根节点元素 4. 初始化场景 5. 添加相机到场景 6. 创建物体到场景 ...

  4. js小知识 双叹号(!!)

    !!:一般用来将后面的表达式强制转换为布尔值(boolean):true或者false; avascript约定规则为:  false.undefinded.null.0.”” 为 false  tr ...

  5. (转载)Android中的Service：Binder，Messenger，AIDL（2）

    前言 前面一篇博文介绍了关于Service的一些基本知识,包括service是什么,怎么创建一个service,创建了一个service之后如何启动它等等.在这一篇博文里有一些需要前一篇铺垫的东西,建 ...

  6. BootStrap学习(一)——BootStrap入门

    1.环境搭建 中文官网下载地址:http://www.bootcss.com/ 右击选中的WEB项目,点击导入,选择文件系统,然后下一步,选择BootStrap文件目录路径,如下: 完成后,WEB项目 ...

  7. 【摘录】JDBC Master Slave(JDBC方式的JMS集群)

    JDBC Master Slave First supported in ActiveMQ version 4.1 If you are using pure JDBC and not using t ...

  8. Nginx——在Windows环境下安装(一)

    下载 Nginx是开源软件,用户可以访问 http://nginx.org/ 网站获取源码包或Windows二进制文件下载.其中1.13.x版本为开发版本,1.12.0版本为稳定版本.开发版本分支会较 ...

  9. stm8s103 EEPROM烧程序时能否保留

    EEPROM的参数需要再烧录程序时保留,做试验测试是否能够保留 1.在ST Visual Develop中硬件仿真手动修改EEPROM的值. 2.在ST Visual Programmer中读取EEP ...

  10. 一个渣渣python脚本，用wol控制开机

    #!/usr/bin/env python #coding:utf8 import os,time d={} '''f = open('E:\info.txt','r') for ipmac in f ...