使用JavaScript创建和删除HTML元素-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript" charset="utf-8" >

    function test()
    {
        //创建a元素 createElement(标签名)
        var myhref=document.createElement("a");
        myhref.id="myhref";//表示给创建的a元素添加id
        myhref.href="http://blog.sina.com.cn/wyhkli" //给a元素添加连接
        myhref.innerText="连接到我的博客";
        //appendChild() 向节点的子节点列表末尾添加新的子节点。
        //document.body.appendChild(myhref); //把新添加的这个节点也就是a元素添加到body里!body表示是新添加的a标签的父节点
        // 也可以指定添加到div里 id是唯一的可以直接用
        div1.appendChild(myhref); //表示div1是新添加的a标签的父节点
    }
    function delee()
    {
        //removeChild() 先取父节点然后从父节点的子节点列表中删除某个节点。
        //document.getElementById('div1').removeChild(document.getElementById('myhref'));
        // 也可以这样删除
        var node=document.getElementById('myhref');
        //parentNode 返回某个元素的父节点
        node.parentNode.removeChild(node);//表示返回node元素的父节点从父节点的子节点列表中删除node这个节点
    }

</script>
</head>
<body>
    <input type="button" name="" value="创建一个a标签" onclick="test()"><br/>
    <input type="button" name="" value="删除a标签" onclick="delee()"><br/>
    <div id="div1" style="width:200px;height:200px;background:green">

    </div>
</body>
</html>