03JavaScript程序设计修炼之道 2019-06-25_20-34-21-2019-06-25_20-44-06 节点元素的操作：增删改

Posted hijackykun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了03JavaScript程序设计修炼之道 2019-06-25_20-34-21-2019-06-25_20-44-06 节点元素的操作：增删改相关的知识，希望对你有一定的参考价值。

技术图片

 

14nodeOper.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box 
            width: 200px;
            height: 200px;
            background-color: pink;
        

        .block 
            display: block;
        
        
    </style>
</head>
<body>
    <button id="btn_create">创建</button>
    <button id="btn_del">删除</button>
    <script src="../../01-ES/code/tool.js"></script>
    <script>
        // 创建元素
        var oDiv = document.createElement("div");
        oDiv.innerHTML = "我是动态创建div";
        oDiv.className = "box";
        // 将元素添加到body 上树
        //document.body.appendChild(oDiv); 在末尾追加儿子
        document.body.insertBefore(oDiv,document.body.children[0]);
        var i = 0;
        $("btn_create").onclick = function() 
            var oSpan = document.createElement("span");
            oSpan.className = "block";
            oSpan.innerHTML = i++;
            document.body.appendChild(oSpan);
           //document.body.innerHTML += "<span>"+(i++)+"</span><br/>";
        
        $("btn_del").onclick = function() 
            var spans = document.getElementsByTagName("span");
            /*
            for(var i=0; i<spans.length; i++) 
                spans[i].remove(); // 删除自己
                i--;
            
            */
           /*
            for(var i=spans.length-1; i>=0; i--) 
                spans[i].remove();
            
            */
        

        // i=0 [span0,span1,span2,.....]
        // i=1 [span1,span2,.....]
    </script>
</body>
</html>

 

 

以上是关于03JavaScript程序设计修炼之道 2019-06-25_20-34-21-2019-06-25_20-44-06 节点元素的操作：增删改的主要内容，如果未能解决你的问题，请参考以下文章

03JavaScript程序设计修炼之道 2019-06-23_15-50-11 验证码

03JavaScript程序设计修炼之道_2019-07-07_14-33-54 BOM

03JavaScript程序设计修炼之道 2019-06-27_20-04-17 节点元素操作：复制

03JavaScript程序设计修炼之道 2019-06-25_20-34-21-2019-06-25_20-44-06 节点元素的操作：增删改

03JavaScript程序设计修炼之道 2019-05-23_20-28-51_2019-05-26_21-12-07 for练习hw

03JavaScript程序设计修炼之道_ JS进阶 OOP构造函数 2019-07/21-171247***0725-200514