Heim > Web-Frontend > js-Tutorial > Ausführliche Erläuterung von Beispielen zum Erstellen von Tag-Tags mit JS

Ausführliche Erläuterung von Beispielen zum Erstellen von Tag-Tags mit JS

零下一度
Freigeben: 2017-06-17 17:17:17
Original
1468 Leute haben es durchsucht

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")
Nach dem Login kopieren

Knotenstile zuweisen;


x.setAttribute("class",类名)
Nach dem Login kopieren

Knoten Werte zuweisen ;


x.innerHTML = 内容 //赋值
Nach dem Login kopieren

Knoten zum übergeordneten Element hinzufügen


要添加到的元素.appendChild(x);
Nach dem Login kopieren

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>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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=""; //清除内容
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage