dom操作

作者: 冰点雨 | 来源:发表于2022-07-18 10:55 被阅读0次

JQuery 17
DOM (javascript DOM节点操作)
Vue解决了哪些问题
jQuery中的DOM操作
jQuery——DOM
jQuery中的DOM操作
会jquery 就能快速快速上手 vue？你仿佛在说笑
JQuery---dom相关节点操作
2018-07-19dojo
基本dom操作,数组操作

createElement("li") 创建节点

createTextNode("广州") 创建文本节点

appendChild(gzText) 添加子节点

insertBefore(a,b) 在b节点前面插入a节点

replaceChild(a,b) b节点替换a节点

removeChild(bj) 删除节点

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom的增删改</title>
    <script>
        function myClick(idStr,fun){
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        };



        window.onload = function(){

            // 创建一个广州节点，添加到city下
            myClick("btn1",function(){
                // 创建li节点
                var li = document.createElement("li");
                // 创建文本节点
                var gzText = document.createTextNode("广州");
                // 添加子节点
                li.appendChild(gzText);

                var city = document.getElementById("city");
                city.appendChild(li);
            });
            
            // 将广州节点插入到bj前面
            myClick("btn2",function(){
                // 创建广州
                var li = document.createElement("li");
                var gzText = document.createTextNode("广州");
                li.appendChild(gzText);

                var city = document.getElementById("city");
                var bj = document.getElementById("bj");
                /* 
                insertBefore(a,b)
                在b节点前面插入a节点
                 */
                city.insertBefore(li,bj);

            });

            // 广州节点替换bj节点
            myClick("btn3",function(){
                // 创建广州
                var li = document.createElement("li");
                var gzText = document.createTextNode("广州");
                li.appendChild(gzText);

                var city = document.getElementById("city");
                var bj = document.getElementById("bj");
                /* 
                replaceChild(a,b)
                b节点替换a节点
                 */
                city.replaceChild(li,bj);

            });
           // 删除bj节点
           myClick("btn4",function(){
            var bj = document.getElementById("bj");

                // var city = document.getElementById("city");
                // city.removeChild(bj);

                // 更常用
                bj.parentNode.removeChild(bj);

           });
           // 读取#city的HTML代码
           myClick("btn5",function(){
            var city = document.getElementById("city");
            alert(city.innerHTML);
           });
           /*
               <li>广州</li>
                <li>上海</li>
                <li>天津</li>
                <li>南京</li>
            */

           // 设置#bj内的HTML代码
           myClick("btn6",function(){
            var bj = document.getElementById("bj");
            bj.innerHTML = "昌平";
           });

        //    innerTtml添加广州
        myClick("btn7",function(){
            var city = document.getElementById("city");
            // city.innerHTML += "<li>广州</li>";



            var li = document.createElement("li");
            li.innerHTML ="广州";
            city.appendChild(li);
           });

            
            
        };
    </script>
</head>
<body>
    <div id="total">
        <div class="inner">
            <p>你喜欢哪个城市？</p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>天津</li>
                <li>南京</li>
            </ul>
        </div>


        <div id="btnList"> 
             <div><button id="btn1">创建一个广州节点，添加到city下</button></div>
             <div><button id="btn2">将广州节点插入到bj前面</button></div>
             <div><button id="btn3">广州节点替换bj节点</button></div>
             <div><button id="btn4">删除bj节点</button></div>
             <div><button id="btn5">读取#city的HTML代码</button></div>
             <div><button id="btn6">设置#bj内的HTML代码</button></div>
             <div><button id="btn7">innerTtml添加广州</button></div>
        </div>

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