Home > Web Front-end > JS Tutorial > Detailed explanation of examples of creating Tag tags with JS

Detailed explanation of examples of creating Tag tags with JS

零下一度
Release: 2017-06-17 17:17:17
Original
1474 people have browsed it

This article mainly introduces the method of creating Tag tags with JS, and analyzes the steps and related operating techniques of dynamically operating HTML elements on the page to realize the tag tag function based on specific examples. Friends in need can refer to it. NextThe example in this article describes the method of creating Tag tags with JS. Share it with everyone for your reference, the details are as follows:

1. The principle of creating a label isCreate a node;

var x = document.createElement("TagName")
Copy after login

Assign node style;


x.setAttribute("class",类名)
Copy after login

Assign value to node;


x.innerHTML = 内容 //赋值
Copy after login

Add node to parent element

要添加到的元素.appendChild(x);
Copy after login

2. Style diagram:

3. Main code process: HTML part:

<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>
Copy after login

css part:

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;
}
Copy after login

js part:

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=""; //清除内容
}
Copy after login

The above is the detailed content of Detailed explanation of examples of creating Tag tags with JS. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template