javascript的appendChild的问题

最新推荐文章于 2023-06-28 12:42:04 发布

xcg纸飞机xcg

最新推荐文章于 2023-06-28 12:42:04 发布

阅读量335

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/weixin_45637920/article/details/108569646

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

javascript的appendChild的问题

今天在学习的时候发现了javascript的appendChild()的方法有着自己没有注意的地方。

重点：
如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。

请看以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function delA(){
            
            // alert("hello");
            // this就是超链接内容
            var tr = this.parentNode.parentNode;

            //获取要删除员工的名字
            // var name = document.getElementsByTagName("td")[0].innerHTML;
            var name = tr.children[0].innerHTML;


            //提示框
            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;
            }

            //获取所有input
            var employeeTable = document.getElementById("employeeTable");
            var input = document.getElementsByTagName("input");
            var submit = document.getElementById("addEmpButton");
            submit.onclick = function () {
                //创建tr
                var tr = document.createElement("tr");
                var del = document.createElement("td");
                var td = document.createElement("td");
                for( var i = 0; i<3 ;i++){
                    //创建th
                    //var td = document.createElement("td");
                    td.innerHTML=input[i].value;

                    tr.appendChild(td);
                }
                
                del.innerHTML = "<a href="+"javascript:;"+">Delete</a>";
                del.firstChild.onclick = delA;
                tr.append(del);
                console.log(tr);

                employeeTable.appendChild(tr);
            }

        }
    </script>
</head>
<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@jerry.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>

        <tr>
            <td>Bob</td>
            <td>Bob@Bob.com</td>
            <td>9000</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" value="abc">
                        Submit
                    </button>
                </td>
                
            </tr>
        </table>
    </div>
</body>
</html>

其中的var td = document.createElement(“td”);的位置在for的上面。
在这里插入图片描述
全部填写，网页运行后，导致了只有最后一个td标签可以出现其他的都没有。
运行前：

在这里插入图片描述
运行后：

很惨的结果不过看了上面的重点不难解释，var td = document.createElement("td");这一句在for上面只定义了一次所以在执行的时候for里面appendChild的时候会一直遇到相同的对象td，先将上个td删掉，然后再添加新的td，于是最终留下<td>3<td>。

修改后:

在这里插入图片描述
改后让var td = document.createElement("td");在for循环里面多次创建每次会不同，可以理解为地址不同（身份证上有人同名但是却不同地方，那么必定是两个不同的身份证）就避免了appendChild的删除问题。

xcg纸飞机xcg

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript的appendChild的问题

javascript的appendChild的问题今天在学习的时候发现了javascript的appendChild()的方法有着自己没有注意的地方。重点：如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。请看以下代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c
复制链接

扫一扫

专栏目录