JS DOM操作：增删元素-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42760876/article/details/108056865

这篇博客介绍了JavaScript中操作DOM进行元素增加和删除的方法，包括appendChild的使用，并提到了其他常用的DOM对象方法，适合JS初学者进行增删练习。

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

JS的DOM增删

<body>
    <ul id="city">
        <li>北京</li>
    </ul>
    <input type="button" id="btn01" value="按钮" />
</body>

在这里插入图片描述

增加元素节点li广州

<script type="text/javascript">
    function myClick(id, fun) {
        var btn = document.getElementById(id)
        btn.onclick = fun
	}

	window.onload = function() {
        myClick("btn01", function() {
            //创建一个"广州节点"
            //创建li元素节点
            var li = document.createElement("li");
            //创建 广州文本节点
            var gzText = document.createTextNode("广州");
			//文本放入li
            li.appendChild(gzText);
			//把li放入ul
            var city = document.getElementById("city");
            city.appendChild(li);
        })
    }
</script>

在这里插入图片描述

简单列举了appendChild的用法，下面还有一些常用的DOM方法，可以参考W3C的文档。

增删练习

在这里插入图片描述

<body>
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td>
                <a href="javascript:;">Delete</a>
            </td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td>
                <a href="deleteEmp?id=002">Delete</a>
            </td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td>
                <a href="deleteEmp?id=003">Delete</a>
            </td>
        </tr>
    </table>
    
    <div id="formDiv">
        <h4>添加新员工</h4>
        <table>
            <tr>
                <td class="word">name: </td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">email: </td>
                <td class="inp">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">salary: </td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton">
                        Submit
                    </button>
                </td>
            </tr>
        </table>
    </div>
</body>

<script type="text/javascript">
    //删除函数
    function delA() {
    var tr = this.parentNode.parentNode;
    //获取要删除的员工的名字
    var name = tr.children[0].innerHTML;
    //删除之前弹出一个提示框
    /*
	 * confirm()用于弹出一个带有确认和取消按钮的提示框
	 * 	需要一个字符串作为参数，该字符串将会作为提示文字显示出来
	 * 如果用户点击确认则会返回true，如果点击取消则返回false
	 */
    var flag = confirm("确认删除" + name + "吗?");
    //如果用户点击确认
    if (flag) {
            //删除tr
            tr.parentNode.removeChild(tr);
        }
        /*
         * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
         * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
         */
        return false;
    };

    window.onload = function() {
        /*
         * 点击超链接以后，删除一个员工的信息
         */
        //获取所有额超链接
        var allA = document.getElementsByTagName("a");
        //为每个超链接都绑定一个单击响应函数
        for (var i = 0; i < allA.length; i++) {
            allA[i].onclick = delA;
        }
        /*
         * 添加员工的功能
         * 	- 点击按钮以后，将员工的信息添加到表格中
         */
        //为提交按钮绑定一个单击响应函数
        var addEmpButton = document.getElementById("addEmpButton");
        addEmpButton.onclick = function() {
            //获取用户添加的员工信息
            //获取员工的名字
            var name = document.getElementById("empName").value;
            //获取员工的email和salary
            var email = document.getElementById("email").value;
            var salary = document.getElementById("salary").value;

            //创建一个tr
            var tr = document.createElement("tr");

            //创建四个td
            var nameTd = document.createElement("td");
            var emailTd = document.createElement("td");
            var salaryTd = document.createElement("td");
            var aTd = document.createElement("td");

            //创建一个a元素
            var a = document.createElement("a");

            //创建文本节点
            var nameText = document.createTextNode(name);
            var emailText = document.createTextNode(email);
            var salaryText = document.createTextNode(salary);
            var delText = document.createTextNode("Delete");

            //将文本条件到td中
            nameTd.appendChild(nameText);
            emailTd.appendChild(emailText);
            salaryTd.appendChild(salaryText);

            //向a中添加文本
            a.appendChild(delText);
            //将a添加到td中
            aTd.appendChild(a);

            //将td添加到tr中
            tr.appendChild(nameTd);
            tr.appendChild(emailTd);
            tr.appendChild(salaryTd);
            tr.appendChild(aTd);

            //向a中添加href属性
            a.href = "javascript:;";

            //为新添加的a再绑定一次单击响应函数
            a.onclick = delA;

            //获取table
            var employeeTable = document.getElementById("employeeTable");
            //获取employeeTable中的tbody
            var tbody = employeeTable.getElementsByTagName("tbody")[0];
            //将tr添加到tbodye中
            tbody.appendChild(tr);
        };
    };
</script>

一些 DOM 对象方法

这里提供一些您将在本教程中学到的常用方法：

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
t()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。