68 insertbefore

00

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            /*
                insertBefore()
                【格式】父节点.insertBefore(插入的节点, 旧节点)
                功能：将插入的节点插入到旧节点之前
            */
            window.onload = function(){
                //创建一个<strong> 将这个节点插入到span节点之前
                var oSpan = document.getElementById("span1")
                var oDiv = document.getElementById("div1")
                var node = document.createElement("strong")
                var text = document.createTextNode("文本文档")
                node.appendChild(text)
                oDiv.insertBefore(node, oSpan)
            }
        </script>
    </head>
    <body>
        <div id="div1">
            <p>p</p>
            <span id="span1">span</span>
            <em>em</em>
        </div>
    </body>
</html>

01 教学

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="C:\Users\Administrator\Desktop\网页编程\tool.js"></script>
        <script>
            /*
                insertBefore()
                【格式】父节点.insertBefore(插入的节点, 旧节点)
                功能：将要插入的节点插入到旧节点之前
            */
            window.onload = function(){
                //创建一个<strong> 将这个节点插入到span节点之前


                //<1>创建strong
                var node = createElementWithText("strong", "strong文本")
                var oSpan = document.getElementsByTagName("span")[0]
                //<2>进行插入
                oSpan.parentNode.insertBefore(node, oSpan)
                

                inserAfter(node, oSpan)
            }


            /*
                Dom里inserAfter()这个方法是没有的
            */
            function inserAfter(newNode, oldNode){
                //判断oldNode是否是最后一个节点
                var parent = oldNode.parentNode
                if(oldNode == parent.lastChild){
                    //最后一个节点，直接插入到子节点的末尾
                    parent.appenChild(newNode)
                }else{
                    //插入到oldNode的下一个节点之前
                    parent.insertBefore(newNode, oldNode.nextSibling)
                }
            }
        </script>
    </head>
    <body>
        <div id="div1">
            <p>p</p>
            <span>span</span>
            <em>em</em>
        </div>
    </body>
</html>