1. 程式人生 > >新增、刪除、替換、插入到某個節點的方法(js、jq)

新增、刪除、替換、插入到某個節點的方法(js、jq)

首先說下,具體用得到的方法: js: appendChild() //新增

removeChild() //刪除節點

insertBefore(插入節點,被插節點) //插入(前插後)

replaceChild(新節點,舊節點) //替換(前替換後)

jq: append() (舊節點新增新節點後面) appendTo() (新節點新增到舊節點後面) prepend() (舊節點新增新節點的前面) prependTo() (新節點新增到舊節點的前面) //新增

remove() (//清空:) empty() //刪除

after() ______// 舊節點後面插入 新節點 before() ______ //舊節點前面插入 新節點 insertAfter() ________//新節點插到舊節點後 insertBefore() _________//新節點插到舊節點前 //插入

replaceWith() //替換

以下是案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>節點</title>
    <style>
        button{
            margin-left:10px;
        }
        span{
            display: inline-block;
            width: 20px;
            text-align: center;
            border: 1px solid;
        }
        li{
            float: left;
            display: block;
            width: 100px;
            border:1px solid;
        }
    </style>
</head>
<body>
<div id="js">
    <ul id="jspNode">
        <li id="jsDel">
            1、刪除節點
            <p>我要死了</p>
        </li>
        <li id="jsAdd">
            2、增加節點
            <p>我要多一個兄弟了</p>
        </li>
        <li id="jsInt">
            3、插入節點
            <p>我的兄弟要進來了</p>
        </li>
        <li id="jsChg">
            4、替換節點
            <p>換一個吧</p>
        </li>
    </ul>
    <button>刪除</button>
    <button>增加</button>
    <button>插入</button>
    <button>替換</button>
</div>
<div style="clear: both;"></div>
<div id="jq">
    <ul id="jqpNode">
        <li id="jqDel">
            1、刪除節點
        </li>
        <li id="jqAdd">
            2、增加節點
        </li>
        <li id="jqInt">
            3、插入節點
        </li>
        <li id="jqChg">
            4、替換節點
        </li>
    </ul>
    <button>刪除</button>
    <button>增加</button>
    <button>插入</button>
    <button>替換</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- 注意:如果你直接複製所有程式碼到本地,上述js路徑需要改成你本地的 -->
<script>
    //js  node 節點操作

    let pNode = document.getElementById('jspNode');

    //節點獲取
    let jsDel = document.getElementById('jsDel');
    let jsAdd = document.getElementById('jsAdd');
    let jsInt = document.getElementById('jsInt');
    let jsChg = document.getElementById('jsChg');

    //按鈕獲取
    let jsBtn =  document.getElementById('js').getElementsByTagName('button');

    let jqBtn =  document.getElementById('jq').getElementsByTagName('button');

    var creLi  = document.createElement('li');
    var newP =  document.createElement('li');

    //建立的如插入或刪除節點內容
    creLi.innerHTML = `
         增加出來的節點
        <p>大家好,我剛剛出生,第一次做人,就多指教</p>
        `;

    newP.innerHTML = `<p>我是替換後的結果</p>`
    //刪除節點
    jsBtn[0].onclick = function () {
        pNode.removeChild(jsDel);
    }


    //新增節點
    jsBtn[1].onclick = function () {
        //新增要有來源,所以需要先建立
        pNode.appendChild(creLi)   //在節點的末尾新增,如果是以存在節點,則刪除原有節點,新增至新增處。
    }


    //插入節點
    jsBtn[2].onclick = function () {
        pNode.insertBefore(creLi,jsInt)   //前插後的節點之上
    }

    //替換節點
    jsBtn[3].onclick = function () {
        pNode.replaceChild(newP,jsChg)  //前替換後
    }


    //jq  node  操作


    //幾種刪除節點的方法
    $("#jq button").eq(0).click(function () {
        // var $li=$("#jqDel").remove();//刪除ul節點中"刪除節點"節點
        //$("#jqpNode").append($li);//把剛刪除的元素節點從新新增到ul元素中去
        // $("#jqDel").empty();//清空"刪除節點"節點元素的內容/
    })



    //幾種新增節點的方法
    $("#jq button").eq(1).click(function () {
        // $("#jqAdd").append("<b>向li元素中追加《b》</b>");//向li元素中追加《b》
        // $("<b>將《b》追加到li元素中</b>").appendTo("#jqAdd");//將《b》追加到li元素中
        // $("#jqAdd").prepend("<b>前置《b》</b>");//向li中前置《b》
        // $("<b>《b》前置到li元素中</b>").prependTo("#jqAdd");//將《b》前置到li元素中
    })


    //插入節點:
    $("#jq button").eq(2).click(function () {
        // $("#jqInt").after("<li>插入</li>")    //向每個匹配元素的後面新增內容
        // $("#jqInt").before("<li>插入</li>")  // 向每個匹配元素的前面新增內容
        // $("<li>插入</li>").insertAfter("#jqInt") //把所有匹配的元素插入到另一個、指定的元素元素集合的後面。
        // $("<li>插入</li>").insertBefore("#jqInt") //把所有匹配的元素插入到另一個、指定的元素元素集合的前面。

    })

    //替換節點
    $("#jq button").eq(3).click(function () {
        // $("#jqChg").replaceWith("<li>替換成功</li>");
    })

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