mozilla
您的搜索结果

    Node.insertBefore()

    概述

    Node.insertBefore() 方法,在当前节点的某个子节点之前再插入一个子节点。

    语法

    var insertedElement = parentElement.insertBefore(newElement, referenceElement);
    

     如果referenceElement 为null则newElement将被插入到子节点的末尾。

    • 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。该元素仍然会被插入到父元素中,位于最后一个节点后面。又由于父元素没有第一个子节点,也没有最后一个子节点。 最终,新元素成为唯一的子元素。

    浏览器兼容性

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 1.0 (Yes) (Yes) (Yes) (Yes)

    规范

    文档标签和贡献者

    标签: 
    此页面的贡献者有: ziyunfei, Guangxue.Zhang, AlexChao, teoli, Josephok
    最后编辑者: Guangxue.Zhang,