用js实现添加和删除元素的功能

最新推荐文章于 2024-05-23 21:43:17 发布

老师、我太想进步了！

最新推荐文章于 2024-05-23 21:43:17 发布

阅读量854

点赞数

分类专栏：前端小实例文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_50602185/article/details/125908752

版权

前端小实例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、实现效果

二、HTML、CSS、JS代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" >
        window.onload = function () {
            var box = document.getElementById("box");  //通过id属性值获得DIV
        }

        function addNode(){
            var p = document.createElement("p"); //创建需要添加的元素节点
            p.innerHTML = "这里是文字这里是文字3";
            box.appendChild(p); //将段落节点添加到box的子节点列表后面
        }
        function deleteNode(){//删除节点
            var p = box.lastChild;
            box.removeChild(p);//删除第一个段落
        }
    </script>
    <style>
        #bigBox{
            width: 400px;
            margin: 100px auto;
            padding: 30px;
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <div id="bigBox">
        <div id="box">
            <p>这里是文字这里是文字1</p>
            <p>这里是文字这里是文字2</p>
        </div>
        <a href="javascript:addNode()">添加</a>
        <a href="javascript:deleteNode()">删除</a>
    </div>
</body>
</html>