js添加删除HTML元素

最新推荐文章于 2024-08-16 22:36:01 发布

棕旨

最新推荐文章于 2024-08-16 22:36:01 发布

阅读量2.9k

点赞数

分类专栏： js笔记文章标签： js 添加删除HTML元素

本文链接：https://blog.csdn.net/m15933025112/article/details/89028573

版权

js笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js添加删除HTML元素</title>
</head>
<body>
<div id="ssj">
    <input id="s1" type="button" value="添加元素" onclick="addHTMLelement()"/>
    <input id="s2" type="button" value="删除元素" onclick="deleteHTMLelement()"/>
    <p id="p1">
        这是第一段
    </p>
    <p id="p2">
        这是第二段
    </p>

</div>
<script>
    function addHTMLelement() {
        var parent =document.createElement('p');//创建新元素
        parent.id='p3';
        var node =document.createTextNode("新的一段");//新元素中内容
        parent.appendChild(node);//将该节点添加入P元素中
        var element =document.getElementById('ssj');
        element.appendChild(parent);
    }
    function deleteHTMLelement(){
        var parent =document.getElementById('ssj');
        var child  =document.getElementById('p3');
        parent.removeChild(child);
        //还可以使用child.parentNode.removeChild(child); 就可以不用找父亲节点

    }
</script>
</body>
</html>