js添加删除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>

你可能感兴趣的:(js笔记)