js 添加、删除DOM元素

雪芽蓝域zzs

已于 2024-03-09 15:04:45 修改

阅读量1.2k

点赞数 9

分类专栏： JavaScript 文章标签： javascript

于 2024-03-09 14:57:39 首次发布

本文链接：https://blog.csdn.net/qq_36158551/article/details/136583326

版权

JavaScript 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文详细介绍了如何使用JavaScript的appendChild(),insertBefore()方法在HTML中动态添加DOM元素，以及removeChild(),remove()方法删除DOM元素。通过示例代码展示了如何在实际项目中操作DOM，包括JSON数据处理和事件监听。

摘要由CSDN通过智能技术生成

1. js添加、删除DOM元素

1.1. 添加DOM元素

1.1.1. appendChild()方法

该方法添加的元素位于父元素的末尾，使用方法：
parentNode.appenChild(NewNode) // parentNode是需要添加元素的容器，NewNode是新添加的元素
创建一个li元素并添加到ul的末尾：

       var ulDom = document.getElementById("ul_id");
                var htmlStr =
                    //`<div class="member-li-layout" οnclick="clickFunc(${index})">
                    `<div class="member-li-layout">
                           <div class="member-item-layout">
                                 <span class="member-item-layout">姓名：</span>
                                 <span class="member-item-content">
                                       ${item.name}
                                 </span>
                           </div>   
                           <div class="member-item-layout">
                                 <span class="userName">班级：</span>
                                 <span class="member-item-content">
                                      ${item.classroom}
                                 </span>
                           </div>                     
                     </div>`;
                var liDom = document.createElement("li");
                liDom.setAttribute('class', `member-li-body`);
                liDom.setAttribute('data-name', item.name);
                liDom.innerHTML = htmlStr;
                ulDom.appendChild(liDom);

1.1.2. insertBefore()方法

该方法可以将元素添加到指定位置，使用方法：
// parentNode是需要添加元素的容器，NewNode是新添加的元素, beforeNode是添加在哪个元素之前
parentNode.insertBefore(newNode, beforeNode)
创建一个li元素并添加在第二个li元素之前：

const ulNode = document.querySelectorAll('.list')[0],
	  liNodes = document.querySelectorAll('.item'),
	  liNode = document.createElement('li');
liNode.className = 'item';
liNode.innerHTML = 4;
ulNode.insertBefore(liNode, liNodes[1]);

1.2. 删除DOM元素

1.2.1. removeChid()方法

该方法用于删除指定元素，使用方法：
parentNode.removeChild(removeNode) // parentNode是需要删除元素的容器，removeNode是要删除的元素

   // //方法一：删除自身
    // var box=document.getElementById("ul_id");
    // box.remove();
    //方法二：删除子节点
    var ulDom = document.getElementById("ul_id");
    var lis = ulDom.querySelectorAll('li');
    for (i = lis.length; i > 0; i--) {
        ulDom.removeChild(lis[i - 1]);
    };

1.2.2. remove()方法

   // //方法一：删除自身
    /var box=document.getElementById("ul_id");
    // box.remove();

1.3. 示例代码

1.3.1. page-dom.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>点赞</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script type="text/javascript" src="../static/js/init-rem.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/mui.min.css"/>
    <script type="text/javascript" src="../static/js/mui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../css/page-dom.css"/>
    <script type="text/javascript" src="../static/js/jquery-3.1.1.min.js"></script>
</head>
<body>
<section class="base-title-layout2">
    <div class="base-title-bar2">
         <span class="base-title-back" onclick="history.go(-1)">
             <img src="../img/icon/icon_back.png"/>
         </span>
        <h1>dom</h1>
        <a class="base-title-back"></a>
    </div>
</section>
<div class="base-page-layout">
    <ul id="ul_id" class="member-ul-body"></ul>
</div>
<script type="text/javascript" src="../js/page-dom.js"></script>
</body>
</html>

1.3.2. page-dom.css


.member-ul-body {
    overflow-x: hidden;
}
.member-ul-body li {

    border-radius: 0.2rem;
    margin: 0.2rem 0.01rem;
    padding: 0.2rem 0.2rem;
}
.member-li-body  {
    background: #fff;
}
.member-li-layout {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.member-item-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0.05rem 0;
}
.member-item-title {
    color: black;
    text-align: center;
    font-size: 0.3rem;
}

.member-item-content {
    color: #666666;
    text-align: center;
    font-size: 0.3rem;
}
.member-bottom-layout {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    -webkit-align-items: center;
    padding: 0 0.3rem;
}

1.3.3. page-dom.js

let myArr
$(function () {
    getData()
});

function getData() {
    //获取json中数据
    $.getJSON(`../json/domJson.json`,
        function (res) {
            myArr = res.rows;
            myArr.forEach(function (item, index) {
                var ulDom = document.getElementById("ul_id");
                var htmlStr =
                    //`<div class="member-li-layout" οnclick="clickFunc(${index})">
                    `<div class="member-li-layout">
                           <div class="member-item-layout">
                                 <span class="member-item-layout">姓名：</span>
                                 <span class="member-item-content">
                                       ${item.name}
                                 </span>
                           </div>   
                           <div class="member-item-layout">
                                 <span class="userName">班级：</span>
                                 <span class="member-item-content">
                                      ${item.classroom}
                                 </span>
                           </div>                     
                     </div>`;
                var liDom = document.createElement("li");
                liDom.setAttribute('class', `member-li-body`);
                liDom.setAttribute('data-name', item.name);
                liDom.innerHTML = htmlStr;
                ulDom.appendChild(liDom);
            })
            //详情
            goDetail()
            //清除数据
            //clearData()
        })
}

/**
 * 点击item
 */
function clickFunc(index) {
    console.log("name:" + myArr[index].name)
}
/**
 * 清除数据
 */
function clearData() {
    // //方法一：删除自身
    // var box=document.getElementById("ul_id");
    // box.remove();
    //方法二：删除子节点
    var ulDom = document.getElementById("ul_id");
    var lis = ulDom.querySelectorAll('li');
    for (i = lis.length; i > 0; i--) {
        ulDom.removeChild(lis[i - 1]);
    }
}

/**
 * 详情
 */
function goDetail() {
    var lis = document.querySelector('#ul_id')
        .querySelectorAll('li');
    for (i = 0; i < lis.length; i++) {
        //点击item
        lis[i].addEventListener('tap', function () {
            var name = $(this).attr('data-name');
            console.log("name:" + name)
        });
    }
}

1.3.4. domJson.json

{
  "msg": "信息",
  "code": 200,
  "rows": [
    {
      "name": "云兮",
      "classroom": "一年级4班"
    },
    {
      "name": "晨曦",
      "classroom": "二年级1班"
    },
    {
      "name": "佳宁",
      "classroom": "三班2班"
    }
  ]
}