第一次CODING附parentElement.insertBefore使用详解
来源:互联网 发布:java adobe 生成pdf 编辑:程序博客网 时间:2024/06/04 21:46
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 ChromeFirefox (Gecko) Internet ExplorerOpera Safari (WebKit)
Basic support 1.0(Yes) (Yes)(Yes) (Yes)
规范
insertBefore
- 第一次CODING附parentElement.insertBefore使用详解
- 使用parentNode 代替 parentElement
- insertBefore
- jquery之append与insertBefore使用实例
- appendChild() 或 insertBefore()使用与区别
- 使用insertBefore在节点前插入元素
- 使用appendChild(),insertBefore()的一个小问题
- Coding 如何使用 Coding 开发 Coding
- IOS中Key-Value Coding (KVC)的使用详解
- iOS 【IOS中Key-Value Coding (KVC)的使用详解】
- 使用 Git上传代码到coding.net代码仓库详解
- 使用 Git上传代码到coding.net代码仓库详解
- 使用 Git上传代码到coding.net代码仓库详解
- dcdiag工具使用详解(附日志)
- Android Fragments 使用详解附代码实例
- Windows WMIC命令使用详解(附实例)
- Windows WMIC命令使用详解(附实例)
- Key-Value Coding 详解.
- 用java实现单链表结构与基本数据操作
- 200. Number of Islands**
- 第三十二课:初探c++标准库----------狄泰软件学院
- BZOJ 4238 电压
- 初学HTML5-第二课 CSS样式
- 第一次CODING附parentElement.insertBefore使用详解
- 理工门外的树
- 1003. Emergency (25)
- IOS UItableview UIcollectionview cell高度自适应
- python正则表达式学习
- 【CG物理模拟】风筝模拟
- 批处理中的变量和参数(二)
- 微信小程序_倒计时补零
- 凸包,点到直线距离(飞机场,uva 11168)