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. MapReduce运行流程具体解释

    在hadoop中.每一个mapreduce任务都会被初始化为一个Job. 每一个Job又能够分为两个阶段:map阶段和reduce阶段.这两个阶段分别用两个函数来表示,即map函数和reduce函数. ...

  2. Http抓包工具--查尔斯

    查尔斯 查尔斯:http://www.charlesproxy.com/ 这是比較好用的抓包工具.有Mac.Windows.Linux版本号.能够相应用程序.浏览器.手机.手机模拟器进行抓包. 官方站 ...

  3. chrome控制台常用技巧有哪些

    chrome控制台常用技巧有哪些 一.总结 一句话总结:别的里面支持的快捷键,chrome里面几乎都支持,比如sublime中的ctrl+d,其实真是一通百通,都差不多的 1.chrome如何快速切换 ...

  4. [JZOJ 5894] [NOIP2018模拟10.5] 同余方程 解题报告（容斥）

    题目链接: http://172.16.0.132/senior/#contest/show/2523/0 题目: 题解:(部分内容来自https://blog.csdn.net/gmh77/arti ...

  5. hihoCoder 1403 后缀数组 重复旋律

    思路: 后缀数组 第一次写 留个模板吧 先求出后缀数组,问题转换为询问height数组中连续k-1个数的最小值的最大值,单调队列扫描一遍即可.-yousiki 手懒用得STL //By SiriusR ...

  6. css文字换行问题white-space:pre-line或者white-space:pre-wrap，解决word-wrap:break-word解决不了的

    想让文字换行必须要写的那几个css样式就略过了.当一行文字是数字或字母时或者数字字母组合时会出现不换行局面,这时候加个word-wrap:break-word:就基本可以解决但是有种情况是它解决不了的 ...

  7. jQuery学习(一)——jQuery入门

    1.jQuery基础 Jquery它是一个库(框架),要想使用它,必须先引入! jquery-1.8.3.js:一般用于学习阶段. jquery-1.8.3.min.js:用于项目使用阶段 官网下载后 ...

  8. 模块 –OS & OS.PATH

    模块-Os模块: os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 In [25]: os.getcwd() Out[25]: 'C:\\Users\\***' os.c ...

  9. AWS中国EC2 公网IP登录免pemKEY修改shh 配置文件

    个人使用记录 1:KEY 授权 chmod 400 VPN.pem 2:连接 ssh -i "VPN.pem" ubuntu@ec2-54-183-119-93.us-west-1 ...

  10. SCIP,Clp,Gurobi和Cplex安装

    SCIP安装 1.在自己的家目录下建立目录scip,并将获得的压缩包考入该文件夹并解压缩 tar -zxvf scipoptsuite-5.0.0.tgz 2.进入目录scipoptsuite-5.0 ...