JavaScript基础(23)

JavaScript基础(23)_DOM增删改

DOM增加对象

createElement():
含义：创建一个元素节点对象。
用法：它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回。比如：var li = document.createElement("li");

createTextNode():
含义：创建文本节点对象。
用法：需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回。比如：var text_node = document.createTextNode("广州");

appendChild():
含义：向一个父节点中添加一个新的子节点。
语法：父节点.appendChild(子节点)；

DOM删除对象

removeChild():
含义：删除一个子节点。
语法：父节点.removeChild(子节点);

DOM改动对象

insertBefore():
含义：在指定的子节点前面插入新的子节点。
语法：父节点.insertBefore(新节点,旧节点);

replaceChild():
含义：使用指定的子节点替换已有的子节点。
语法：父节点.replaceChild(新节点,旧节点);

父节点的获取：
1、直接找出父节点。比如：var city = document.getElementsByClassName("city")[0];
2、子节点.parentNode(推荐使用)。比如：city.insertBefore(li,sh);

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function () {
            var li = document.createElement("li");
            // var text_node = document.createTextNode("广州");
            // li.appendChild(text_node);
            // 相当于以上备注的代码，此代码更加简洁。
            li.innerHTML = "广州";
            myclick("add_city",function () {
                var city = document.getElementsByClassName("city")[0];
                city.append(li);
            }
            );
            myclick("remove_city",function () {
                var city = document.getElementsByClassName("city")[0];
                city.removeChild(li);
            }
            );
            myclick("insertBefore_city",function () {
                var sh = document.getElementById("sh");
                // 调用子节点.parentNode直接替换了city，使得代码更简洁。
                sh.parentNode.insertBefore(li,sh);
            }
            );
            myclick("replace_city",function () {
                var sz = document.getElementById("sz");
                sz.parentNode.replaceChild(li,sz);
            }
            );
        }
        // 回调函数
        function myclick(btn, fun) {
            flag = document.getElementById(btn);
            flag.onclick = fun;
        }
    </script>
</head>
<body>
    <p>你喜欢哪个城市？</p>
    <ul class="city">
        <li id="sh">上海</li>
        <li>北京</li>
        <li>厦门</li>
        <li id="sz">深圳</li>
        <li>天津</li>
    </ul>
    <form action="">
        <input type="button" value="添加城市" id="add_city">
        <input type="button" value="删除城市" id="remove_city"><br>
        <input type="button" value="在最前面添加城市" id="insertBefore_city"><br>
        <input type="button" value="把深圳替换为广州" id="replace_city">
    </form>
</body>
</html>