django学习入门系列之第六点《DOM的事件了解》

铁匠匠匠

已于 2024-07-30 00:05:47 修改

阅读量638

点赞数 9

分类专栏： django 文章标签：学习 sqlite 数据库 django python 前端框架前端

于 2024-07-30 00:02:31 首次发布

本文链接：https://blog.csdn.net/qq_62548908/article/details/140784047

版权

django 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

文章目录

事件
往期回顾

事件

点击按钮生成列表(单击)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--单击触发-->
<input type="button" value="点击添加" onclick="add()">

<ul id="c1">

</ul>

<script type="text/javascript">
    function add() {
        //创建列表并添加内容
        var newTag = document.createElement("li");
        newTag.innerText = "中国联通"
        
        //访问列表并添加内容
        var addtag = document.getElementById("c1");
        addtag.appendChild(newTag);
    }
</script>

</body>
</html>

双击添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--双击触发-->
<input type="button" value="点击添加" ondblclick="add()">

<ul id="c1">

</ul>

<script type="text/javascript">
    function add() {
        //创建列表并添加内容
        var newTag = document.createElement("li");
        newTag.innerText = "中国联通"

        //访问列表并添加内容
        var addtag = document.getElementById("c1");
        addtag.appendChild(newTag);
    }
</script>


</body>
</html>

根据用户输入内容来添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--输入添加的内容-->
<input type="text" placeholder="请输入内容" id="news">
<!--单击触发-->
<input type="button" value="点击添加" onclick="add()">

<ul id="c1">

</ul>

<script type="text/javascript">
    function add() {
        //找到input
        var inTag = document.getElementById("news")

        //获取用户输入的内容（注意，这里input是另一种获取格式）
        var newString = inTag.value;

        //创建列表并添加内容
        var newTag = document.createElement("li");
        newTag.innerText = newString
        //访问列表并添加内容
        var addtag = document.getElementById("c1");
        addtag.appendChild(newTag);
    }
</script>
</body>
</html>

完善版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--输入添加的内容-->
<input type="text" placeholder="请输入内容" id="news">
<!--单击触发-->
<input type="button" value="点击添加" onclick="add()">

<ul id="c1">

</ul>

<script type="text/javascript">
    function add() {
        //找到input
        var inTag = document.getElementById("news")

        //获取用户输入的内容（注意，这里input是另一种获取格式）
        var newString = inTag.value;
        if (newString.length > 0) {
            //创建列表并添加内容
            var newTag = document.createElement("li");
            newTag.innerText = newString
            //访问列表并添加内容
            var addtag = document.getElementById("c1");
            addtag.appendChild(newTag);

            //将里面的内容清空
            inTag.value = "";
        } else {
            alert("输入不能为空");
        }
    }
</script>

</body>
</html>

注意，dom还有很多东西

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】
11.【CSS基础样式介绍2】
12.【CSS基础样式介绍3】
13.【CSS基础样式介绍3】
14.【案例小米商城头标】
15.【案例小米商城头标总结】
16.【案例小米商城二级菜单】
17.【案例商品推荐部分】
18.【伪类简单了解】
19.【position】
20.【案例小米商城中app图标代码】
21.【边框及总结】
22.【BootSrap初了解】
23.【BootSrap的目录栏】
24.【BootSrap的栅格系统】
25.【案例博客案例】
26.【案例登录】
27.【案例后台管理样例】
28.【图标】
29.【BootStrap依赖】
30.【javascript初了解】
31.【jJavaScript的变量】
32.【JavaScript的字符串类型】
33.【JavaScript的数组介绍】
34.【案例动态数据】
35.【javascript 对象（字典）】
36.【案例动态表格】
37.【Javascript的条件语句和函数】
38.【DOM初了解】

铁匠匠匠

关注

9
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
django学习入门系列之第六点《DOM的事件了解》

/获取用户输入的内容（注意，这里input是另一种获取格式）//创建列表并添加内容。//访问列表并添加内容。//创建列表并添加内容。//访问列表并添加内容。//创建列表并添加内容。//访问列表并添加内容。//将里面的内容清空。
复制链接

扫一扫

专栏目录