本文實例講述了JS創建Tag標簽的方法。分享給大家供大家參考，具體如下：
一 . 創建標簽其原理就是
創建一個節點；
var x = document.createElement("TagName")賦予節點樣式；
x.setAttribute("class",類名)對節點進行賦值；
x.innerHTML = 內容 //賦值
添加節點到父元素
要添加到的元素.appendChild(x);
二. 樣式圖:
三. 主要代碼流程：
HTML部分：
<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>
css部分：
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;}js部分：
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=""; //清除內容}更多關于JavaScript相關內容可查看本站專題：《JavaScript頁面元素操作技巧總結》、《javascript面向對象入門教程》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
