犟驴学编程

# DOM操作之创建和移动节点

作者: 多叉树；转载须注明出处

# 创建节点

在DOM操作中，我们可以动态创建节点，并将创建的节点挂载到HTML树中，成为一个新的节点。

在JS中，使用 doucument.createElement(节点类型) 创建节点

// tagName 节点元素类型，例如div
var divDom = doucument.createElement(tagName);

上面的语法只是创建节点，还需要一个挂载节点的方法，将我们创建的节点挂载到DOM树上， 否则我们无法看见此节点

// parentNode 父节点元素
// aChild 创建的子节点元素
parentNode.appendChild(aChild)

Untitled

使用 appendChild() 方法只能将我们创建的dom节点当成最后一个子节点挂载到父节点的最后

挂载节点还可以使用 insertBefore() 方法，将此节点挂载到某个兄弟节点的前面

// parentNode 父节点元素
// newChild 新创建节点
// referenceNode 相关的兄弟节点
parentNode.insertBefore(newChild, referenceNode);

Untitled

# 完整示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建元素</title>
</head>
<body>
    <div id="parentNode">
        <p >我是p1</p>
        <p id="p2">我是p2</p>
        <p >我是p3</p>
    </div>

    <script>
        
        var newChildNode = document.createElement('p');
        // 填充内部文本内容
        newChildNode.innerText = '我是newChild';

        var parentNode = document.getElementById('parentNode');
        parentNode.appendChild(newChildNode);

        var newChildNode2 = document.createElement('p');
        newChildNode2.innerText = '我是newChile2';
        
        var beforeNode = document.getElementById('p2');
        
        parentNode.insertBefore(newChildNode2, beforeNode);
</script>
</body>
</html>

Untitled

# 移动节点

在创建节点的完整示例中，我不小心将 parentNode.insertBefore(newChildNode2, beforeNode); 写成了 parentNode.insertBefore(newChildNode, beforeNode);

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建元素</title>
</head>
<body>
    <div id="parentNode">
        <p >我是p1</p>
        <p id="p2">我是p2</p>
        <p >我是p3</p>
    </div>

    <script>
        
        var newChildNode = document.createElement('p');
        // 填充内部文本内容
        newChildNode.innerText = '我是newChild';

        var parentNode = document.getElementById('parentNode');
        parentNode.appendChild(newChildNode);

        var newChildNode2 = document.createElement('p');
        newChildNode2.innerText = '我是newChile2';
        
        var beforeNode = document.getElementById('p2');
        
        parentNode.insertBefore(newChildNode, beforeNode);
</script>
</body>
</html>

发现 newChildNode 节点不会被重新挂载， 这意味着一个dom节点不会被挂载两次

所以在dom树中挂载好的节点只能被移动，挂载两次是不可能的, 移动的方法仍然是使用 appendChild 和 insertBefore

// 移动 existNode 到新的父节点newParentNode的最后
newParentNode.appendChild(existNode);

// 移动 existNode 到新的父节点 newParentNode 下，并且在 兄弟节点 newBeforeBroNode的前面
newParentNode.insertBefore(existNode, newBeforeBroNode);

Untitled

# 完整示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MoveElement</title>

    <style>
        div {
            width: 200px;
            height: 200px;
        }

        #parentNode1 {
           
           background-color: red;
       } 

        #newParentNode {
           
            background-color: green;
        } 
</style>
</head>
<body>
    <div id="parentNode1">
        <p>子节点1</p>
        <p>移动节点1</p>
        <p id="moveNode">移动节点2</p>
    </div>

    <div id="newParentNode">
        <p>子节点N1</p>
    </div>
    <script>
        
        var parentNode1 = document.getElementById('parentNode1');

        // 获取两个移动节点
        var moveNode1 = parentNode1.getElementsByTagName('p')[1];
        var moveNode2 = document.getElementById('moveNode');

        var newParentNode = document.getElementById('newParentNode');

        var newBroNode = newParentNode.getElementsByTagName('p')[0];
        // 将 两个移动节点移动到 新的父元素下
        newParentNode.appendChild(moveNode1);
        newParentNode.insertBefore(moveNode2, newBroNode);
</script>
</body>
</html>

Untitled

← DOM操作之删除节点 →