Javascript 笔记与总结（2-10）删除节点，创建节点

【删除节点】

步骤：

① 找到对象

② 找到他的父对象 parentObj

③ parentObj.removeChild(子对象);

【例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1{
             300px;
            height: 300px;
            background: blue;
            border-bottom: 1px solid black;
        }
    </style>
    <script>
        function del(){
            var lis = document.getElementsByTagName("li");
            var lastLi = lis[lis.length-1];
            lastLi.parentNode.removeChild(lastLi);
        }
    </script>
</head>
<body>
    <input type="button" value="删除最后一个li" onclick="del();">
    <ul>
        <li>白羊</li>
        <li>金牛</li>
        <li>双子</li>
        <li>巨蟹</li>
    </ul>
</body>
</html>

【创建节点】

步骤：

① 创建对象

② 找到父对象 parentObj

③ parentObj.addChild(对象);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1{
             300px;
            height: 300px;
            background: blue;
            border-bottom: 1px solid black;
        }
    </style>
    <script>
        function add(){
            //创建li
            var li = document.createElement("li");
            //创建文本节点
            var txt = document.createTextNode("海魔女");
            //插入文本节点到li
            li.appendChild(txt);
            //把li插入ul
            document.getElementsByTagName("ul")[0].appendChild(li);
        }
    </script>
</head>
<body>
    <input type="button" value="追加一个li" onclick="add();">
    <ul>
        <li>白羊</li>
        <li>金牛</li>
        <li>双子</li>
        <li>巨蟹</li>
    </ul>
</body>
</html>