改进上一篇文章中的代码以及innerHTML小结

最新推荐文章于 2021-05-04 22:20:09 发布

ZzzzzzP丶

最新推荐文章于 2021-05-04 22:20:09 发布

阅读量105

点赞数

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

本文链接：https://blog.csdn.net/weixin_43131346/article/details/100890175

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

上一篇文章链接

HTML DOM

标签体的设置与获取
- innerHTML
- 元素.innerHTML 获取元素的标签体内的值，自动识别HTML标签，innerText可以将标签里的标签当做文本读取（只读取文本）。
- 元素.innerHTML(参数) 给标签体内传值，可以带标签。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM综合练习</title>
    <script>
        window.onload=function (){
            document.getElementById("get_stu").onclick=function () {
                //获取各个输入框输入的值
                var id = document.getElementById("id").value;
                var name = document.getElementById("name").value;
                var age = document.getElementById("age").value;
                var gender = document.getElementById("gender").value;
                var hobby = document.getElementById("hobby").value;
                var table = document.getElementsByTagName("table")[0];
                
                table.innerHTML += "<td>"+id+"</td>\n" +
                    "        <td>"+name+"</td>\n" +
                    "        <td>"+age+"</td>\n" +
                    "        <td>"+gender+"</td>\n" +
                    "        <td>"+hobby+"</td>\n" +
                    "        <td><a href=\"javascript:void(0)\" οnclick=\"del(this)\">删除</a></td>";
            };
        };
        //删除方法
        function del(obj) {
            //调用该方法的标签获取父节点可以得到table（<a>(obj) -> <td> -> <tr> -> <table>）
            var table = obj.parentNode.parentNode.parentNode;
            //同样的方式获取tr标签
            var tr = obj.parentNode.parentNode;
            //通过table节点删除tr节点完成删除
            table.removeChild(tr);
        }
    </script>
</head>
<body>
<br>
<p>学生信息</p>
<br>
<label>
    学号：<input type="text" id="id" name="stu_id">
</label>
<br>
<label>
    姓名：<input type="text" id="name" name="stu_name">
</label>
<br>
<label>
    性别：<input type="text" id="age" name="stu_age">
</label>
<br>
<label>
    性别：<input type="text" id="gender" name="stu_gender">
</label>
<br>
<label>
    爱好：<input type="text" id="hobby" name="stu_hobby">
</label>
<br>
<input type="button" id="get_stu" name="get_stu" value="提交">
<table>
    <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>爱好</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>1</td>
        <td>66</td>
        <td>18</td>
        <td>女</td>
        <td>Gameing</td>
        <!-- a标签作为按钮使用，将href属性设置为javascript:void(0) onclick调用定义好的对象即可 -->
        <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
    </tr>
</table>
</body>
</html>

ZzzzzzP丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
改进上一篇文章中的代码以及innerHTML小结

上一篇文章链接HTML DOM标签体的设置与获取innerHTML元素.innerHTML 获取元素的标签体内的值，自动识别HTML标签，innerText可以将标签里的标签当做文本读取（只读取文本）。元素.innerHTML(参数) 给标签体内传值，可以带标签。代码如下：<!DOCTYPE html><html lang="en"><he...
复制链接

扫一扫