Dieser Artikel stellt hauptsächlich die Methode zum Erstellen von Tag-Tags mit JS vor und analysiert die Schritte und zugehörigen Betriebstechniken von Javascript zur dynamischen Bearbeitung von Seiten-HTML-Elementen, um die Tag-Tag-Funktion anhand spezifischer Beispiele zu realisieren Need kann darauf verweisen.
Das Beispiel in diesem Artikel beschreibt, wie man Tag-Tags mit JS erstellt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
1. Das Prinzip zum Erstellen eines Etiketts lautet:
Erstellen Sie einen Knoten ;
var x = document.createElement("TagName")
Knotenstile zuweisen;
x.setAttribute("class",类名)
Knoten Werte zuweisen ;
x.innerHTML = 内容 //赋值
Knoten zum übergeordneten Element hinzufügen
要添加到的元素.appendChild(x);
2. Stildiagramm:
3. Hauptcodefluss:
HTML-Teil:
<p class="container"> <h3 style="text-align: center">单击下面得"添加"按钮添加标签</h3> <p class="dispanel" id="box"></p> <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> </p>
CSS-Teil:
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-Teil:
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=""; //清除内容 }
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen zum Erstellen von Tag-Tags mit JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!