Comment utiliser JS pour ajouter et supprimer dynamiquement des balises-js tutoriel-php.cn

Comment utiliser JS pour ajouter et supprimer dynamiquement des balises

php中世界最好的语言

Libérer： 2018-06-07 14:26:03

original

4371 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser JS pour ajouter et supprimer dynamiquement des balises, et quelles sont les précautions à prendre pour utiliser JS pour ajouter et supprimer dynamiquement des balises. Ce qui suit est un cas pratique, jetons un coup d'œil.

Balise 1.p

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

Copier après la connexion

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

Copier après la connexion

Supplément :

Jetons un coup d'œil aux petits points générés dynamiquement par js (petits points générés dynamiquement en fonction du nombre d'images de carrousel)

Générer dynamiquement de petits points (générer dynamiquement de petits points en fonction du nombre d'images du carrousel)

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

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour des choses plus excitantes. , veuillez faire attention à php Autres articles connexes sur le site chinois !

Lecture recommandée :

Comment trier les objets json et supprimer des données avec le même identifiant

Comment utiliser js pour implémenter la fonction glisser-déposer

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!