74.《js操作节点以及练习》-CSDN博客

本文链接：https://blog.csdn.net/qq_44864082/article/details/115053272

1.createElement
创建元素
格式： document.createElement(“标签名”)
参数：标签名
返回值：创建的这个节点

2.appendChild
格式：node1.appendChild(node2)
功能：将node2插入到node1的末尾

3.createTextNode()
格式：document.createTextNode("")

4.insertBerfore()
格式: document.body.insertBefore(box2,box1)
功能：将box2添加到 box1 的前面

5.replaceChild 替换节点

格式 document.body.replaceChild(box1,box2)
参数：box2 替换 box1

6.cloneNode 节点克隆
格式： node1.cloneNode(true) true克隆几点以及内容
参数：克隆节点 node1

代码案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        background-color: pink;
    }
</style>

<body>
    <div class="wrap">
        <em>你好，我是em</em>
        div文本
        <strong>你好，世界</strong>
    </div>
    <button onclick="add">添加元素</button>
    <script>
        /*
            1. createElement
              创建元素
              格式： document.createElement("标签名")
              参数： 标签名
              返回值： 创建的这个节点
            
            2. appendChild
               格式：node1.appendChild(node2)
               功能：将node2插入到node1的末尾
            
            3. createTextNode() 
                格式：document.createTextNode("")

            4. insertBerfore()
               格式: document.body.insertBefore(box2,box1)
               功能：将box2添加到 box1 的前面

            5. replaceChild 替换节点
                格式 document.body.replaceChild(box1,box2)
                参数：box2 替换 box1

            6. cloneNode 节点克隆
                格式： node1.cloneNode(true)   true克隆几点以及内容 
                参数： 克隆节点 node1   

        */
        var wrap = document.getElementsByClassName("wrap")[0]
        // 创建元素    
        var newdiv = document.createElement("p")
        //  创建文本内容
        var textContent = document.createTextNode("你好，世界") 
        newdiv.appendChild(textContent)
        
        var btn = document.getElementsByTagName("button")[0]
        // 追加
        btn.onclick = function () {
            // 在wrap 末尾 添加 元素
            // wrap.appendChild(newdiv)
            // 在 wrap 之前 添加 一个新元素
            // document.body.insertBefore(newdiv,wrap)
            // 替换节点
            // document.body.replaceChild(newdiv,wrap)
            // 克隆节点
            var cloneN =  wrap.cloneNode(true)
            document.body.appendChild(cloneN)
        }
    </script>
</body>

</html>

练习案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .wrap {
        background-color: antiquewhite;
        height: 500px;
        width: 300px;
        border: 5px solid #ccc;
    }

    button {
        width: 80px;
        height: 30px;
        background-color: black;
        color: #fff;
        margin: 7px;
    }

    input {
        width: 100%;
    } 
    .odiv div {
        height: 30px;
        border: 1px solid green;
        margin-bottom: 10px;
        background-color: yellow;
    }
</style>

<body>
    <div class="wrap">
        <input type="text">
        <button>增加</button>
        <button>删除</button>
        <button>拷贝</button>
        <div class="odiv">
        </div>
    </div>


    <script>
        var btn = document.getElementsByTagName("button")
        var input = document.getElementsByTagName("input")[0]
        var divs = document.getElementsByClassName("odiv")[0]
        btn[0].onclick = function () {
            if (input.value) {
                var odiv = document.createElement("div")
                var text = document.createTextNode(input.value)
                odiv.appendChild(text)
                divs.appendChild(odiv)
                input.value = ''
            }else{
                alert("不能为空")
            }

        }
        btn[1].onclick = function () {
            divs.removeChild(divs.lastChild)
        }
        btn[2].onclick = function () {
            var news = divs.lastChild.cloneNode(true);
            divs.appendChild(news)
        }
    </script>
</body>

</html>