js操作DOM--添加、删除节点

最新推荐文章于 2023-05-02 11:48:46 发布

MinSen

最新推荐文章于 2023-05-02 11:48:46 发布

阅读量2w

点赞数

分类专栏： asp.net javascript css html net 文章标签： null function button javascript input div

net 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

asp.net

13 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

js removeChild() 用法

<body>
<p id="p1">welcome to <b>javascript</b> world !</p>
<script language="javascript" type="text/javascript">

</script>
</body>

---------------------------------------------------------------------------------------------------------------------------------

=================================================================

<html>

<head>

<title>js控制添加、删除节点</title>

</head>
<script type="text/javascript">
    var all;
    function addParagraph() {
        all = document.getElementById("paragraphs").childNodes;
        var newElement = document.createElement("p");
        var seq = all.length + 1;

        //创建新属性
        var newAttr = document.createAttribute("id");
        newAttr.nodeValue = "p" + seq;
        newElement.setAttribute(newAttr);

        //创建文本内容
        var txtNode = document.createTextNode("段落" + seq);

        //添加节点
        newElement.appendChild(txtNode);
        document.getElementById("paragraphs").appendChild(newElement);
    }
    function delParagraph() {
        all = document.getElementById("paragraphs").childNodes;
        document.getElementById("paragraphs").removeChild(all[all.length -1]);
    }
</script>
<style>
    p{
        background-color : #e6e6e6 ;
    }
</style>
<body>
<center>
    <input type="button" value="添加节点" οnclick="addParagraph();"/>
    <input type="button" value="删除节点" οnclick="delParagraph();"/>
    <div id="paragraphs">
        <p id="p1">段落1</p>
        <p id="p2">段落2</p>
    </div>
</center>
</body>