JavaScript添加列表操作

最新推荐文章于 2024-08-20 10:25:59 发布

代号[K]

最新推荐文章于 2024-08-20 10:25:59 发布

阅读量8.8k

点赞数 3

本文链接：https://blog.csdn.net/MPF1230/article/details/99298554

版权

这篇博客探讨了如何使用JavaScript实现列表的动态添加功能，包括自动生成编号、通过输入框添加内容到列表以及下拉框选择性别。在实现过程中遇到了Chrome浏览器无法获取id为'name'的元素的问题，原因是'id'与window对象的内置属性冲突。解决办法是更改该id名称以避免命名重复。博客还涵盖了DOM操作，如onclick事件、getElement、createElement和appendChild等。

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

在这里插入图片描述

实现效果：

按照顺序自动生成编号，点击提交按钮后，将输入框中的内容添加进入列表当中。以及下拉框来选择性别为男或女。并且当输入框内容为空时，不向列表中添加元素，并且顶部字体变为红色。

包含的相关dom事件练习，onclick事件，获取元素getElement，创建元素createElement，元素节点appendChlid

HTML代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="list.css" rel="stylesheet" type="text/css">
</head>
<body>

    <p>请输入内容</p>
    <input class="input" id="name" type="text" placeholder="请输入姓名">
    <input class="input" id="piece" type