Home >Web Front-end >JS Tutorial >How to operate JS to dynamically add and delete tags

How to operate JS to dynamically add and delete tags

php中世界最好的语言Original: 2018-06-07 14:26:034354browse

This time I will show you how to operate JS to dynamically add and delete tags, and what are the precautions for how to operate JS to dynamically add and delete tags. The following is a practical case, let's take a look.

1.p tag

<p id="mp3">
 <p>1</p> <button onclick="myFun9()">添加</button>
</p>

2.js

function myFun9() {
 var mp3 = document.getElementById("mp3"); //获取组件1
 var eleme = document.createElement("p"); //创建组件2
 var ele_content = document.createTextNode("2");//创建节点内容
 eleme.appendChild(ele_content); // 组件添加节点
 mp3.appendChild(eleme); //组件2加入组件1
 }
==================删除==============================
<button onclick="myFun10()">删除</button>
 <p id="mp4">
 <p id="p1">1</p>
 <p id="p2">2</p>
 <p id="p3">3</p>
 <p id="p4">4</p>
 <p id="p5">5</p>
 </p>
function myFun10(){
 var parent=document.getElementById("mp4");
 var son=document.getElementById("p1");
 parent.removeChild(son);
 }

Supplement:

Let’s take a look at js-dynamically generated small dots (dynamically generated small dots based on the number of carousel images)

Dynamicly generate small dots (dynamically generate small dots based on the number of carousel images)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  body,ul{
   padding: 0;
   margin: 0;
  }
  ul{
   list-style: none;
  }
  .lunbo{
   width: 730px;
   height: 454px;
   margin: 100px auto;
   overflow: hidden;
   position: relative;
  }
  .circle{
   position: absolute;
   left: 50%;
   margin-left: -50px;
   bottom: 10px;   
  }
  .circle span{
   display: inline-block;
   width: 18px;
   height: 18px;
   background-color: #ccc;
   text-align: center;
   border-radius: 18px;
   cursor: pointer;
   margin-right:10px;
  }
  .circle span.current{
   background-color: yellow;
  }
 </style>
 <script> 
  window.onload = function(){
   function $(id){ return document.getElementById(id); }
   //动态生成轮播图小圆点
   var circle = document.createElement("p"); 
   circle.setAttribute("class","circle");
   var lis = document.getElementsByTagName("li");
   for(var i=0; i<lis.length; i++){
    var span = document.createElement("span");
    span.innerHTML = i+1;
    circle.appendChild(span);
   }
   $("scroll").appendChild(circle);
   var spanChildren = circle.children;
   spanChildren[0].setAttribute("class","current");
  }
 </script>
</head>
<body>
 <p class="lunbo" id="scroll">
  <ul id="ul">
   <li><img src="images/11.jpg" alt=""></li>
   <li><img src="images/22.jpg" alt=""></li>
   <li><img src="images/33.jpg" alt=""></li>
   <li><img src="images/44.jpg" alt=""></li>
   <li><img src="images/55.jpg" alt=""></li> 
   <li><img src="images/66.jpg" alt=""></li>
  </ul>
  <!-- <p class="circle">
   <span>1</span>
   <span class="current">2</span>
   <span>3</span>
   <span>4</span>
   <span>5</span>
   <span>6</span>
  </p> -->
 </p>
</body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

How to operate JS to dynamically add and delete tags

Related articles