Maison >interface Web >js tutoriel >Comment utiliser JS pour ajouter et supprimer dynamiquement des balises

Comment utiliser JS pour ajouter et supprimer dynamiquement des balises

php中世界最好的语言original: 2018-06-07 14:26:034325parcourir

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>

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

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser ztree dans vue (tutoriel détaillé)Article suivant：Comment utiliser ztree dans vue (tutoriel détaillé)

Articles Liés

Voir plus