DOM初学第一天，动态操作网页元素

动态操作节点

需求分析：

	要求动态获取数据，并添加到网页元素。

技术点：

	获取数据，动态添加节点，动态删除节点

效果动图：

源码分享：
js

    <script>
        
        // 数据模拟
        let  arr = ["john Doe","jane Doe","Dan Doe","Danielle Doe","Mike Doe","Leah Doe","叔叔"];
        
        //清除所有
        let clearAll = () => {
           let name = document.querySelectorAll(".name");
               for (let i =0 ;i <name.length;i++){
                   name[i].parentNode.removeChild(name[i]);
           }
        };
        
        // 添加
        let add = (i) => {
            let container = document.getElementById("container");
            let div = document.createElement('div');
            div.className = "name";
            let word = document.createTextNode(arr[i]);
            let img = document.createElement("img");
            img.src = "img/叉.png";
            img.addEventListener("click", function () {
               div.parentNode.removeChild(div);
            });
            div.appendChild(word);
            div.appendChild(img);
            container.appendChild(div);
        };
        
        //  姓名 即 添加按钮  生成函数
        let addUl = () => {
            let ul = document.getElementsByTagName("ul");
            for (let i=0 ; i < arr.length ;i++){
                let li = document.createElement("li");
                let span = document.createElement("span");
                let text = document.createTextNode(arr[i]);
                let button = document.createElement("button");
                let btnText = document.createTextNode("添加");
                span.appendChild(text);
                button.appendChild(btnText);
                button.addEventListener("click", function a () {
                      add(i);
                });
                li.appendChild(span);
                li.appendChild(button);
                ul[0].appendChild(li);
            }
        };
        addUl();
        
    </script>

CSS

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body {
            background-color: #133D5C;
        }
        .w {
            width: 500px;
            margin: 50px auto;
        }
        p {
            color: white;
            margin-bottom: 20px;
        }
        span {
            display: inline-block;
            color: white;
            width: 100px;
            margin-right: 100px;
        }
        #container {
            width: 400px;
            height: 135px;
            background-color: white;
            margin-bottom: 20px;
            border-radius: 10px;
            overflow: hidden;
        }
        ul {
            margin-top: 50px;
        }
        ul li {
            padding: 10px;
        }
        button {
            text-align: center;
            background-color: #DF685E;
            border: none;
            outline: none;
            color: white;
            width: 70px;
            height: 20px;
            border-radius: 5px;
            cursor: pointer;
        }
        #clearAll {
            width: 125px;
        }
        .name {
            float: left;
            height: 30px;
            line-height: 30px;
            color: white;
            background-color: #3C9C5B;
            border: 1px solid #3C9C5B;
            margin: 10px 10px 0;
            text-indent: 10px;
            border-radius: 5px;
        }
        img {
            height: 20px;
            vertical-align: middle;
            cursor: pointer;
            text-align: right;
        }
    </style>

HTML

 <div class="w">
        <p>
            单击下面的“添加”按钮，添加标签
        </p>
        <div id="container">

        </div>
        <h5>
            <button id="clearAll" onclick="clearAll()">全部清除</button>
        </h5>
        <ul>
        </ul>
    </div>