DOM API is designed this way. body is the parent element of h1 . Although h1 is an Element , this method inherits Node . Node.insertBefore() Grammar var insertedElement = parentElement.insertBefore(newElement, referenceElement); | | | | 被插入的节点 | 被插入的节点 | 新插入节点的父节点 | 插入newElement之前的那个节点 Parameters and return values insertedElement is the inserted node, i.e. newElement parentElement is the parent node of the newly inserted node newElement is the inserted node referenceElement The node before inserting newElement Look at Node.removeChild again Grammar let oldChild = node.removeChild(child); // OR element.removeChild(child); Parameters child is the child node to be removed. node is the parent node of child. oldChild Saves a reference to the deleted child node. oldChild === child .

javascript - When deleting DOM using removechild, you need to get the parent element first, but when insertbefore, you don't need to go to the parent element. and can be used directly-PHP Chinese Network Q&A

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    
    <button id='btn'>创建元素</button>
    
    <script type="text/javascript">
        
        var btn = document.getElementById('btn');
        
        //注册点击事件
        btn.onclick = function(){
            //创建一个元素
            var h1 = document.createElement('h1');
            h1.innerHTML = "这是新增h1标签";

            console.log( h1 );

            //使用appendChild的方式
            //document.body.appendChild( h1 );
            
            //使用insertBefore的方式
            //是在父元素中，先找一个节点，然后插入到它之前
            document.body.insertBefore(h1,btn); //新插入的节点是h1，作为第一个参数
        }

    </script>
</body>
</html>

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    
    <p id="box">
        <h2>删除操作</h2>
        <p>段落1</p>
    </p>
    
    <button id='btn'>删除</button>
    
    <script type="text/javascript">
        
        //找父节点p
        //var box = document.getElementById('box');
        //找子节点h2
        var h2 = document.getElementsByTagName('h2')[0];
        
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            //box.removeChild( h2 );
            h2.parentNode.removeChild( h2 );
        }
    </script>

</body>
</html>

Grammar

reply all(2)

过去多啦不再A梦2017-06-14 10:55:43 2 floor

DOM API is designed this way.

body is the parent element of h1.

Although h1 is an Element, this method inherits Node.

Node.insertBefore()

Parameters and return values

insertedElement is the inserted node, i.e. newElement
parentElement is the parent node of the newly inserted node
newElement is the inserted node
referenceElement The node before inserting newElement

Look at Node.removeChild again

let oldChild = node.removeChild(child);

// OR

element.removeChild(child);

Parameters

child is the child node to be removed.
node is the parent node of child.
oldChild Saves a reference to the deleted child node. oldChild === child.

Like +0

Add Reply

迷茫2017-06-14 10:55:43 1 floor

body is also an element.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Grammar

Parameters and return values

Grammar

Parameters