添加、删除、替换、插入到某个节点的方法（js、jq）

最新推荐文章于 2025-03-17 22:00:31 发布

婆婆丁的成长记

最新推荐文章于 2025-03-17 22:00:31 发布

阅读量1w

点赞数 3

本文链接：https://blog.youkuaiyun.com/weixin_42855542/article/details/83717825

版权

本文深入讲解了使用JavaScript和jQuery进行DOM操作的方法，包括添加、删除、插入和替换节点的多种方式，通过实例演示了如何利用这些方法实现网页元素的动态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先说下，具体用得到的方法：
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>