JS 創建Tag 標簽

  一 . ###創建標簽其原理就是

1. • 　創建一個節點；
     • var x = document.createElement("TagName")
   • 　賦予節點樣式；　
     • x.setAttribute("class",類名)
   •    對節點進行賦值；　

     • x.innerHTML = 內容 //賦值

   • 添加節點到父元素
     • 要添加到的元素.appendChild(x);

二. 樣式圖: 

　　

 

 

三. 主要代碼流程：

　　　　

   <div class="container">
        <h3 style="text-align: center">單擊下面得"添加"按鈕添加標簽</h3>
        <div class="dispanel" id="box"></div>
        <button class="btn" id="btn1">全部清除</button>
        <ul id="ul">
            <li><span>John Doe1</span> <button class="clibtn btn">添加</button></li>
            <li><span>John Doe2</span> <button class="clibtn btn">添加</button></li>
            <li><span>John Doe3</span> <button class="clibtn btn">添加</button></li>
            <li><span>John Doe4</span> <button class="clibtn btn">添加</button></li>
            <li><span>John Doe5</span> <button class="clibtn btn">添加</button></li>
            <li><span>John Doe6 </span><button class="clibtn btn">添加</button></li>
        </ul>
    </div>

body{
            margin:0 ;
            padding:0;
            background-color:#002F4F;
            color: #ffffff;
            font-family: "微軟雅黑";
            font-size: 1em;
        }
        ul,h3{margin: 0;
            list-style: none;
        padding: 0px}
        .container{
            width:300px;
            height:350px;
            margin: 50px auto;
        }
        .dispanel{
            width: 290px;
            height:50px;
            background-color: #ffffff;
            margin: 0 auto;
        }
        .btn{
            width:100px;
            height:20px;
            color: #ffffff;
            background-color:red;
            border: 0px;
            font-size: 1em;
            margin:10px 0 10px 5px;
        }
        .container ul li{
            width:300px;
            height:30px;
            margin-top:10px;
        }
        .spanstyle{display: inline-block;
            color:#000;
            width:85px;height:22px;
            background-color: bisque;
            margin-left:5px;
            font-size: 12px;
            text-align: center;
            line-height: 22px;
        }

var oUl = document.getElementById("ul");
            var oBtn = oUl.getElementsByClassName("btn");
            var oLi = document.getElementsByClassName("li");
            var oBox = document.getElementById("box");
            for(var i = 0;i<oBtn.length;i++) {
                oBtn[i].onclick = function () {
                    var oA = document.createElement("span");    //創建一個節點Node
                    var oNew = oA.setAttribute("class", "spanstyle");  //將節點上增加class樣式
                    var ospan = this.previousElementSibling.innerHTML + " X"; //this == oBtn[i]  / previousElementSiling:上一個元素的兄弟節點 即 <span>
                    oA.innerHTML = ospan; //將ospa的值付給新創建的節點Node oA.
                    oBox.appendChild(oA);  //將oA 添加為oBox的兒子
                    oA.onclick=function () {
                        oBox.removeChild(oA); //移除這個元素
                    }
                }

            }
            var obtn1 = document.getElementById("btn1");
            obtn1.onclick=function () {
                oBox.innerHTML=""; //清除內容
            }