第一次CODING附parentElement.insertBefore使用详解
2017年新年第一次CODING,遇到问题并解决,放这里做笔记顺便给同样遇到问题的你做参考。
另外这篇文章很多都是COPY别人原文的,感谢原作者的文章。
Node.insertBefore() 方法,在当前节点的某个子节点之前再插入一个子节点。
parentElement.insertBefore使用详解
语法
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
如果referenceElement为null则newElement将被插入到子节点的末尾。如果newElement已经在DOM树中,newElement首先会从DOM树中移除。
insertedElement 是被插入的节点,即 newElement
parentElement 是新插入节点的父节点杰奥思琳
newElement 是被插入的节点
referenceElement 在插入newElement之前的那个节点
示例 1
<div id="parentElement">
<span id="childElement">foo bar</span>
</div>
<script>
// Create a new, plain <span> element
var sp1 = document.createElement("span");
// Get a reference to the element, before we want to insert the element
var sp2 = document.getElementById("childElement");
// Get a reference to the parent element
var parentDiv = sp2.parentNode;
// Insert the new element into the DOM before sp2
parentDiv.insertBefore(sp1, sp2);
</script>
没有 insertAfter 方法。可以使用 insertBefore 方法和 nextSibling 来模拟它。
在前一个例子中,可使用下面代码将 sp1 插入到 sp2 后面:
parentDiv.insertBefore(sp1, sp2.nextSibling);
如果 sp2 没有下一个节点,则它肯定是最后一个节点,则 sp2.nextSibling 返回 null,且 sp1 被插入到子节点列表的最后面(即 sp2 后面)。
示例 2
在第一个子元素的前面插入一个元素,可使用 firstChild 属性。
// Get a reference to the element in which we want to insert a new node
var parentElement = document.getElementById('parentElement');
// Get a reference to the first child
var theFirstChild = parentElement.firstChild;
// Create a new element
var newElement = document.createElement("div");
// Insert the new element before the first child
parentElement.insertBefore(newElement, theFirstChild);
当元素没有首节点时,firstChild 返回 null。该元素仍然会被插入到父元素中,位于最后一个节点后面。又由于父元素没有第一个子节点,也没有最后一个子节点。 最终,新元素成为唯一的子元素。
浏览器兼容性
Desktop Mobile
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (Yes) (Yes) (Yes) (Yes)
规范
insertBefore
第一次CODING附parentElement.insertBefore使用详解相关推荐
- Linux curl命令使用代理、以及代理种类介绍(附:curl命令详解)
目录 一.代理服务器分类: 二.Linux curl命令代理设置参数: 三.Linux curl命令设置代理举例: 1.linux curl命令设置http代理: 2.Linux curl命令设置so ...
- Java初学者必备实战项目 - 三子棋(附源代码和思路详解)
文章目录 游戏介绍 效果图 思路分析 简单汇总 项目总览 小结 游戏介绍 三子棋是一种古老的简单棋盘游戏,玩家分别落子,当同种棋子连成一线即为胜利,先达到者为胜. 效果图 思路分析 在开始写逻辑之前, ...
- 对联智能生成的原理(学习笔记附代码实现与详解)
文章均从个人微信公众号" AI牛逼顿"转载,文末扫码,欢迎关注! 过年的脚步越来越近,是不是该给家里贴上一副对联呢?除了买买买,有没有想过自己动手写出一副对联?来吧,撸起袖子加油干 ...
- 第一次登录阿里云服务器ECS详解及利用MSTSC,XShell,XFTP进行连接
目录 一.配置规则 二.登录连接 0. 重置实例密码 1. 网页远程连接--不支持文件传输 1.1 workbench连接 1.2 VNC连接 1.3 workbench 与 VNC 的区别 2. 利 ...
- Socket编程之TCP实例(附C/C++代码详解)
说明: 主要分步骤给出Windows平台下socket编程的一个TCP实例:使用WINDOWS下网络编程规范Winsock完成网络通信: 对程序各部分细节进行描述. 套接字有三种传输类型SOCK_ST ...
- 使用扩展卡尔曼滤波(EKF)估计电池SOC(附MATLAB程序及详解)part1主函数篇
一.数据导入 这个脚本的主要目标是提供一个使用扩展卡尔曼滤波器(EKF)的电池荷电状态(SOC)估计的程序.使用二阶RC等效电路模型来分析电池在使用中的SOC和端电压(Vt),并考虑到电池表面温度的影 ...
- 激光雷达的检测仿真代码详解(附Matlab源码详解)
一.创建velodyneFileReader 本示例中的激光雷达数据来自安装在车辆上的激光雷达Velodyne HDL32E.创建velodyneFileReader对象以读取录制的PCAP文件. f ...
- C++入门教程:大白话讲解,新手基础篇(附源码及详解、视频课程资料推荐)
C++ Tutorial C++教程 前言 视频教程 文字教程 集成开发环境(IDE) 编译器 工作原理 学习指南 入门书籍 进阶书籍 算法.竞赛书籍 教程 标准构建 程序解释 第一个C++程序--& ...
- windows xp 服务详解
alerter -错误警报器,垃圾,关闭. application layer gateway service -给与第三者网络共享/防火墙支持的服务,有些防火墙/网络共享软件需要.占用1.5mb内存 ...
最新文章
- 翟萍python程序设计_Python程序设计(高等学校计算机教育规划教材)
- 解决cookie跨域访问
- SAP删除会计科目 OBR2
- Java线程之守护线程(Daemon) .
- ASP.NET中进行消息处理(MSMQ)
- jQuery.sap.factory
- android tv字体,best登陆「永久地址0365.tv」android默认字体android使用代码使用新的字体的常用代码...
- 边拍照边显示弹幕 小米公开拍摄相关专利
- 给还是不给?又一个国家要求苹果必须为iPhone 12提供充电器
- 企业级自动化运维神器Ansible
- 近期面试了三个人之感想
- 大型项目开发: 隔离 (《大规模C++程序设计》书摘)
- MySQL 每周总结(4周)
- 如何低成本,快速构建企业 Wiki 和团队知识分享平台
- Process finished with exit code -1073740791 (0xC0000409)解决方法
- logback.xml和日志输入格式说明
- ChatGPT 之父传奇:8岁学编程,16岁出柜,37岁颠覆科技圈,网友:“天选 CEO!”...
- 【分享Oracle练习二】
- 自定义文件格式注册和图标设置
- ker矩阵是什么意思_矩阵光学