insertAfter()方法------在节点后面插入节点

DOM提供了insertBefore()方法，可以在某一个节点前面插入节点，但有时候需要在某一个节点后面插入节点，这就是insertAfter()方法。（From：JavaScript DOM编程艺术）

函数名：insertAfter()

参数：newElement：要添加的节点，targetElement：目标节点

1 function insertAfter(newElement,targetElement) {
2     var parent = targetElement.parentNode;//获取目标节点的父级标签
3     if(parent.lastChild == targetElement) {//如果目标节点正好是最后一个节点，使用appendChild插入
4         parent.appendChild(newElement);
5     } else {
6         parent.insertBefore(newElement,targetElement.nextSibling);//一般情况下要取得目标节点的下一个节点，再使用insertBefore()方法。
7     }
8 }

无论是insertBefore()还是insertAfter(),都是针对DOM节点树而言的，所有最基本的这俩个函数对元素节点和文本节点都有效。

测试一：DOM节点树中是否包含属性节点。

<html>
<head>
</head>
<body>
    <div id="parentNode">
        <h1 id="childElementNode01">this is childNode01</h1>
        <h1 id="childElementNode02">this is childNode02</h1>
        <h1 id="childElementNode03">this is childNode03</h1>
    </div>
    <script>
        var targetElement = document.getElementById("childElementNode02");
        var parentElement = targetElement.parentNode;
        //alert(parentElement.nodeName);//DIV
        //alert(parentElement.nodeType);//1
        //alert(parentElement.childNodes.length);//7,有7个childNode
        /*第一个子节点*/
        //alert(parentElement.childNodes[0].nodeName);//#text
        //alert(parentElement.childNodes[0].nodeType);//3,文本节点
        //alert(parentElement.childNodes[0].nodeValue);//空值
        /*第二个子节点*/
        //alert(parentElement.childNodes[1].nodeName);//H1
        //alert(parentElement.childNodes[1].nodeType);//1，元素节点
        //alert(parentElement.childNodes[1].nodeValue);//null
        /*第三个子节点*/
        //alert(parentElement.childNodes[2].nodeName);//#text
        //alert(parentElement.childNodes[2].nodeType);//3，文本节点
        //alert(parentElement.childNodes[2].nodeValue);//空值
        /*第四个子节点*/
        //alert(parentElement.childNodes[3].nodeName);//H1
        //alert(parentElement.childNodes[3].nodeType);//1，元素节点
        //alert(parentElement.childNodes[3].nodeValue);//null
    </script>
</body>
</html>

可以看到，文本节点和元素节点是同胞关系，这里测试用的是firefox，它把TAB和换行都当成了文本节点，所以才会出现7个子节点。

需要注意的是属性节点并不包含在7个子节点中，也就是说，属性节点并不包含在DOM节点树中。

事实上，属性节点代表了元素中的属性。在DOM API中，属性节点是通过org.w3c.dom.Attr接口来表示的。因为属性实际上是附属于元素的，所以属性节点不能看做元素节点的子节点，

因而在DOM中，属性没有被认为是DOM节点树中的一部分，在属性节点上调用getparentNode()、getPreviousSilbling()和getNextSilbling()方法返回的都是null。

也就是说，元素节点被看成包含它的元素节点的一部分，并不是单独的作为节点存在于DOM节点树中，属性节点并不是“节点”。

测试二：insertBefore()方法是否是作用于整个DOM节点树的。

<html>
<head>
</head>
<body>
    <div id="parentDivNode">
        <h1 id="childElementNode01">this is childElementNode01</h1>
        <h1 id="childElementNode02">this is childElementNode02</h1>
        <h1 id="childElementNode03">this is childElementNode03</h1>
    </div>
    <script>
        var parentDivNode = document.getElementById("parentDivNode");
        var childNode03 = parentDivNode.childNodes[2];//文本节点
        var childNode04 = parentDivNode.childNodes[3];//元素节点
        /*新建文本节点*/
        var newTextNode = document.createTextNode("newTextNode");
        /*新建元素节点*/
        var elementNode = document.createElement("h1");
        var elementNode_textNode = document.createTextNode("elementNode");
        elementNode.appendChild(elementNode_textNode);
        //分4中情况插入DOM 节点树中，insertBefore的2个参数
        //1、文本节点，文本节点
        //parentDivNode.insertBefore(newTextNode,childNode03);
        //alert(parentDivNode.childNodes.length);//8
        //2、文本节点，元素节点
        //parentDivNode.insertBefore(newTextNode,childNode04);
        //alert(parentDivNode.childNodes.length);//8
        //3、元素节点，文本节点
        //arentDivNode.insertBefore(elementNode,childNode03);
        //lert(parentDivNode.childNodes.length);//8
        //4、元素节点，元素节点
        parentDivNode.insertBefore(elementNode,childNode04);
        alert(parentDivNode.childNodes.length);//8
    </script>
</body>
</html>

结论：insertBefore()方法是作用于整个节点树的

测试三：insertAfter()方法是否是作用于整个DOM节点树的。

<html>
<head>
    <script>
        function insertAfter(newElement,targetElement) {
            var parent = targetElement.parentNode;//获取目标元素的父级标签
            if(parent.lastChild == targetElement) {
                parent.appendChild(newElement);
            } else {
                parent.insertBefore(newElement,targetElement.nextSibling);
            }
        }
    </script>
</head>
<body>
    <div id="parentDivNode">
        <h1 id="childElementNode01">this is childElementNode01</h1>
        <h1 id="childElementNode02">this is childElementNode02</h1>
        <h1 id="childElementNode03">this is childElementNode03</h1>
    </div>
    <script>
        var parentDivNode = document.getElementById("parentDivNode");
        var childNode03 = parentDivNode.childNodes[2];//文本节点
        var childNode04 = parentDivNode.childNodes[3];//元素节点
        /*新建文本节点*/
        var newTextNode = document.createTextNode("newTextNode");
        /*新建元素节点*/
        var elementNode = document.createElement("h1");
        var elementNode_textNode = document.createTextNode("elementNode");
        elementNode.appendChild(elementNode_textNode);
        //分4中情况插入DOM 节点树中，insertAfter的2个参数
        //1、文本节点，文本节点
        //insertAfter(newTextNode,childNode03);
        //alert(parentDivNode.childNodes.length);//8
        //2、文本节点，元素节点
        //insertAfter(newTextNode,childNode04);
        //alert(parentDivNode.childNodes.length);//8
        //3、元素节点，文本节点
        //insertAfter(elementNode,childNode03);
        //alert(parentDivNode.childNodes.length);//8
        //4、元素节点，元素节点
        //insertAfter(elementNode,childNode04);
        //alert(parentDivNode.childNodes.length);//8
    </script>
</body>
</html>

结论：insertAfter()方法是作用于整个节点树的，DOM树中的节点都是继承自Node类型。

posted @ 2017-04-26 21:11 小么小二郎阅读(5729) 评论(0) 编辑收藏举报

刷新页面返回顶部

小么小二郎

insertAfter()方法------在节点后面插入节点

公告