Detailed explanation of how to create Tag tags in JS, and detailed explanation of jstag labels

Detailed explanation of how to create Tag tags in JS, and detailed explanation of jstag labels

This example describes how to create a Tag in JavaScript. We will share this with you for your reference. The details are as follows:

I. The principle of creating a tag is

Create a node;

var x = document.createElement("TagName")

Assign a node style;

X. setAttribute ("class", class name)

Assign values to nodes;

X. innerHTML = content // value assignment

Add node to parent Element

Element to be added. appendChild (x );

Ii. Style chart:

Iii. Main Code process:

HTML section:

<Div class = "container"> 

Css section:
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 section:
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"); // create a Node var oNew = oA. setAttribute ("class", "spanstyle"); // Add the class style var ospan = this. previuselementsibling. innerHTML + "X"; // this = oBtn [I]/previuselementsiling: the sibling node of the previous element is <span> oA. innerHTML = ospan; // pay the ospa value to the newly created Node oA. oBox. appendChild (oA); // Add oA as the son of oBox. onclick = function () {oBox. removeChild (oA); // remove this element} var obtn1 = document. getElementById ("btn1"); obtn1.onclick = function () {oBox. innerHTML = ""; // clear content}