js之insertBefore(newElement,oldElement)
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)的更多相关文章
- 廖雪峰js教程笔记13 插入DOM
当我们获得了某个DOM节点,想在这个DOM节点内插入新的DOM,应该如何做? 如果这个DOM节点是空的,例如,<div></div>,那么,直接使用innerHTML = '& ...
- JS脚本收藏（一些实用的函数）
一.共享onload事件 这个函数的名字是addLoadEvent,它是由Simon Willison 编写的.它只有一个参数:打算在页面加载完毕时执行的函数的名字. 下面是addLoadEvent函 ...
- js模拟高级语言的重载
js以递归的方式模拟高级语言的重载,我以添加元素节点为例子: //现有的子元素之前插入一个新的子元素 var before = function(elem,newElement,targetEleme ...
- 关于ajaxfileupload.js一些问题和上传图片就立即显示图片功能
ajaxfileupload.js是上传文件的一个插件,最近碰到的一个问题是在谷歌浏览器上传文件之后,原文本框中的文件名称消失,网上搜了好长时间也没有十分满意的答案.无刷新上传文件我想到的只有ajax ...
- JavaScript之insertBefore()和自定义insertAfter()的用法。
在JS图片库的第五版开发完后http://www.cnblogs.com/GreenLeaves/p/5691797.html#js_Five_Version我们发现一个问题,就是假设在图片列表之后还 ...
- 【js编程艺术】小制作五
1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- 【js 编程艺术】小制作一
最近在看js编程艺术,照葫芦画瓢,做了一个小网页.作为一枚前端渣渣,遇到了好多坑,在这里就不提了. 首先是html代码 /*gallery.html*/<!DOCTYPE html> &l ...
- ajaxFileUpload.js 无刷新上传图片，支持多个参数同时上传，支持 ie6-ie10
/* 131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie10 依赖:jquery-1.6.1.min.js 主方法:ajaxFileUpl ...
- JS插入新的节点
insertBefore() 语法: insertBefore(newchild,refchild) newchild 插入新的节点 refchild 在此节点前插入新节点 <ul id=&qu ...
随机推荐
- [jzoj 4722] [NOIP2016提高A组模拟8.21] 跳楼机 解题报告 （spfa+同余）
题目链接: http://172.16.0.132/senior/#main/show/4722 题目: DJL为了避免成为一只咸鱼,来找srwudi学习压代码的技巧.Srwudi的家是一幢h层的摩天 ...
- 【DNN 系列 创建WEB模块 项目】
现在DNN已经更新到8.0.3 然而使用7.0 的项目模块 会报错, 就是填写网站的时候 会再网站的项目当中添加文件夹这样会破坏网站 所以来自己创建自己的模板项目 首选创建空的WEB 项目网站 创建完 ...
- 终于意识到BIM确实火了
碰巧遇到一个BIM会议.一大帮国内的老师桠桠叉叉坐了一大屋.听了半天感觉都是在吹BIM如何火.第一次听到这个概念感觉这个能火吗. 昨天雄安新区用BIM建设的新闻出来后,一下子惊了.看来BIM进入计算机 ...
- （转载） Scrollview 嵌套 RecyclerView 及在Android 5.1版本滑动时 惯性消失问题
Scrollview 嵌套 RecyclerView 及在Android 5.1版本滑动时 惯性消失问题 标签: scrollviewandroid滑动嵌套 2015-07-16 17:24 1112 ...
- 《鸟哥的Linux私房菜》笔记——02. 关于Linux
Unix 历史 1969年以前:伟大的梦想--Bell, MIT 与 GE 的「Multics」系统 1969年:Ken Thompson 的小型 file server system 1973年:U ...
- hiho1041 - 树，遍历
题目链接 给一棵树,给一个序列,问能不能按这个序列遍历这棵树,满足每条边最多经过两次. -------------------------------------------------------- ...
- STM8S103之GPIO
如何快速了解GPIO,查看Reference manual中GPIO章节,初步了解到GPIO GPIO输入分为:Floating Input和Input with pull-up GPIO输出分为:O ...
- 给DOM操作生成的元素添加事件
问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...
- 【AnjularJS系列2 】— 表单控件功能相关指令
第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控 ...
- FCC编程题之中级算法篇（下）
介绍 本篇是"FCC编程题之中级算法篇"系列的最后一篇 这期完结后,下期开始写高级算法,每篇一题 目录 1. Smallest Common Multiple 2. Finders ...