insertAfter() - - Insert a node behind a node

DOM provides insertBefore() method, which can insert nodes in front of a node, but sometimes it needs to insert nodes behind a node. This is insertAfter() method. (From: JavaScript DOM programming art)

Function name: insertAfter()

Parameter: newElement: The node to be added, targetElement: Target node

1 function insertAfter(newElement,targetElement) {
2     var parent = targetElement.parentNode;//Get the parent label of the target node
3     if(parent.lastChild == targetElement) {//If the target node happens to be the last node, insert it using appendChild
4         parent.appendChild(newElement);
5     } else {
6         parent.insertBefore(newElement,targetElement.nextSibling);//Generally, the next node of the target node is obtained, and then insertBefore() method is used.
7     }
8 }

Both insertBefore() and insertAfter() are for DOM node trees, and all the most basic functions are valid for element nodes and text nodes.

Test 1: Does the DOM node tree contain attribute nodes?

<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,There are seven childNode
        /*First child node*/
        //alert(parentElement.childNodes[0].nodeName);//#text
        //alert(parentElement.childNodes[0].nodeType);//3. Text nodes
        //alert(parentElement.childNodes[0].nodeValue);//Null value
        /*Second child node*/
        //alert(parentElement.childNodes[1].nodeName);//H1
        //alert(parentElement.childNodes[1].nodeType);//1. Element nodes
        //alert(parentElement.childNodes[1].nodeValue);//null
        /*Third child node*/
        //alert(parentElement.childNodes[2].nodeName);//#text
        //alert(parentElement.childNodes[2].nodeType);//3. Text nodes
        //alert(parentElement.childNodes[2].nodeValue);//Null value
        /*Fourth child node*/
        //alert(parentElement.childNodes[3].nodeName);//H1
        //alert(parentElement.childNodes[3].nodeType);//1. Element nodes
        //alert(parentElement.childNodes[3].nodeValue);//null
    </script>
</body>
</html>

As you can see, text nodes and element nodes are siblings. firefox is used in this test. It treats TAB and newline as text nodes, so there are only seven sub-nodes.

It should be noted that the attribute nodes are not included in the seven sub-nodes, that is to say, the attribute nodes are not included in the DOM node tree.

In fact, attribute nodes represent attributes in elements. In the DOM API, attribute nodes are represented by the org.w3c.dom.Attr interface. Because attributes are actually attached to elements, attribute nodes cannot be regarded as child nodes of element nodes.

Therefore, in DOM, attributes are not considered to be part of the DOM node tree. Calling getparentNode(), getPrevious Silbling (), and getNextSilbling() methods on attribute nodes returns null.

That is to say, the element node is regarded as a part of the element node that contains it. It does not exist in the DOM node tree as a node alone, and the attribute node is not a "node".

Test 2: Whether insertBefore() method acts on the whole DOM node tree.

<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];//Text Node
        var childNode04 = parentDivNode.childNodes[3];//Element Node
        /*New Text Node*/
        var newTextNode = document.createTextNode("newTextNode");
        /*New Element Node*/
        var elementNode = document.createElement("h1");
        var elementNode_textNode = document.createTextNode("elementNode");
        elementNode.appendChild(elementNode_textNode);
        //Insertion in Divide 4 DOM In the node tree, insertBefore Two parameters
        //1,Text node, text node
        //parentDivNode.insertBefore(newTextNode,childNode03);
        //alert(parentDivNode.childNodes.length);//8
        //2,Text node, element node
        //parentDivNode.insertBefore(newTextNode,childNode04);
        //alert(parentDivNode.childNodes.length);//8
        //3,Element node, text node
        //arentDivNode.insertBefore(elementNode,childNode03);
        //lert(parentDivNode.childNodes.length);//8
        //4,Element Node, Element Node
        parentDivNode.insertBefore(elementNode,childNode04);
        alert(parentDivNode.childNodes.length);//8
    </script>
</body>
</html>

Conclusion: insertBefore() method acts on the whole node tree

Test three: whether insertAfter() method acts on the whole DOM node tree.

<html>
<head>
    <script>
        function insertAfter(newElement,targetElement) {
            var parent = targetElement.parentNode;//Get the parent label of the target element
            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];//Text Node
        var childNode04 = parentDivNode.childNodes[3];//Element Node
        /*New Text Node*/
        var newTextNode = document.createTextNode("newTextNode");
        /*New Element Node*/
        var elementNode = document.createElement("h1");
        var elementNode_textNode = document.createTextNode("elementNode");
        elementNode.appendChild(elementNode_textNode);
        //Insertion in Divide 4 DOM In the node tree, insertAfter Two parameters
        //1,Text node, text node
        //insertAfter(newTextNode,childNode03);
        //alert(parentDivNode.childNodes.length);//8
        //2,Text node, element node
        //insertAfter(newTextNode,childNode04);
        //alert(parentDivNode.childNodes.length);//8
        //3,Element node, text node
        //insertAfter(elementNode,childNode03);
        //alert(parentDivNode.childNodes.length);//8
        //4,Element Node, Element Node
        //insertAfter(elementNode,childNode04);
        //alert(parentDivNode.childNodes.length);//8
    </script>
</body>
</html>

Conclusion: The insertAfter() method acts on the whole node tree, and the nodes in the DOM tree are all inherited from Node type.

Keywords: Javascript Attribute Programming Firefox

Added by SurgeProto on Sat, 06 Jul 2019 00:10:16 +0300

Programming VIP

insertAfter() - - Insert a node behind a node

Popular Keywords