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 ...
随机推荐
- HDUOj 看病要排队 优先队列的使用 题目1873
STL优先队列的具体描写叙述 http://blog.csdn.net/yueloveme/article/details/47106639 题目地址:http://acm.hdu.edu.cn/s ...
- 安卓中经常使用控件遇到问题解决方法(持续更新和发现篇幅)(在textview上加一条线、待续)
TextView设置最多显示30个字符.超过部分显示...(省略号),有人说分别设置TextView的android:signature="true",而且设置android:el ...
- QStandardItemModel的data线程安全（在插入数据时，临时禁止sizeHint去读model中的data）
版权声明:本文为博主原创文章,欢迎转载,转载请注明出处 https://blog.csdn.net/MatchYang/article/details/52988257 在直接使用QStandardI ...
- Understanding The Complete Story of Postback in ASP.NET
https://docs.microsoft.com/zh-cn/dotnet/api/system.web.ui.page.ispostback?view=netframework-4.7 http ...
- nyoj--8--一种排序(排序，水题)
一种排序 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 现在有很多长方形,每一个长方形都有一个编号,这个编号可以重复:还知道这个长方形的宽和长,编号.长.宽都是整数:现 ...
- 【linux】——centos 分辨率配置
用过centos的朋友肯定知道centos在默认安装的时候显示器的分辨率只有800*600,但是我们想把改成1024*768或者更大,怎么办呢,我也是试过了才知道,首先打开系统-管理-显示-硬件-显示 ...
- 133.throw机制 抛出类类型
#include <iostream> using namespace std; //try尝试执行,抛出throw,throw之后语句不再执行 //catch处理throw的异常 voi ...
- Android自定义TabBar
转载请说明出处:http://www.sunhome.org.cn 我发现现在的移动开发界面都被iOS主导了,UI动不动设计出来的东西都是ios的风格,对于一个做Android的程序员来说甚是苦恼啊, ...
- 51nod 1448 二染色问题 （逆向考虑）
题目: 注意,这题不是把一块区域的黑翻成白.白翻成黑. 是把一块区域全部翻成白或者翻成黑. 初始为全白,看能否翻出题中的情况. 我们假设翻转若干次能得到图中的形状,那么我们找出最后一次的翻转,即全W或 ...
- ActiveMQ学习笔记（3）----JMS的可靠性机制
1. 消息接收确认 JMS消息只有在被确认之后,才认为已经被成功的消费了,消息成功消费通常包含三个阶段:客户接收消息,客户处理消息和消息被确认. 在事务性会话中,当一个事务被提交的时候,确认自动发生. ...