So bedienen Sie JS, um Tags dynamisch hinzuzufügen und zu löschen-js-Tutorial-php.cn

So bedienen Sie JS, um Tags dynamisch hinzuzufügen und zu löschen

php中世界最好的语言

Freigeben： 2018-06-07 14:26:03

Original

4354 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie JS zum dynamischen Hinzufügen und Löschen von Tags verwenden und welche Vorsichtsmaßnahmen für den Betrieb von JS zum dynamischen Hinzufügen und Löschen von Tags gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

1.p-Tag

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

Nach dem Login kopieren

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);
 }

Nach dem Login kopieren

Ergänzung:

Werfen wir einen Blick auf js-dynamisch generierte kleine Punkte (dynamisch generierte kleine Punkte basierend auf der Anzahl der Karussellbilder)

Erzeugen Sie dynamisch kleine Punkte (erzeugen Sie dynamisch kleine Punkte basierend auf der Anzahl der Karussellbilder)

<!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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So sortieren Sie JSON-Objekte und löschen Daten mit derselben ID

Wie Sie JSON verwenden, um Drag-and-Drop-Funktion implementieren

Das obige ist der detaillierte Inhalt vonSo bedienen Sie JS, um Tags dynamisch hinzuzufügen und zu löschen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!