本文实例讲述了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程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】