Comment ajouter un élément Li dans jS-js tutoriel-php.cn

Comment ajouter un élément Li dans jS

php中世界最好的语言

Libérer： 2018-03-17 14:34:41

original

4674 Les gens l'ont consulté

Cette fois, je vais vous montrer comment ajouter l'élément Li à jS. Quelles sont les précautions pour ajouter l'élément Li à jS. Voici un cas pratique, jetons un oeil.

bloc de code HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
   <title>**javaScript动态添加Li元素**</title>
   <style type="text/css">
 ul li{list-style:none;display:block;text-align:left;}
ul li span{display:inline-block;margin-top:5px;margin-right:35px;}
  </style>
   <script type="text/javascript">
   //add code
   </script>
   <body>
   //此处为ul动态添加li元素
   <ul id="J_List">
   </ul> 
   </body>
</html>

Copier après la connexion

js ajoute dynamiquement le code de l'élément Li (Méthode 1)

 var userName="Tom";
 var userEamil="12345678@qq.com";
 var userPhone="12345678910";
 //方法1：用innerHTML
document.getElementById("J_List").innerHTML+="<li class=\"newLi\"><span>"+_userName+"<\/span><span>"+userEamil+"<\/span><span>"+userPhone+"<\/span><span><input type=\"button\" value=\"删除\" onclick=\"this.parentNode.parentNode.parentNode.removeChild
(this.parentNode.parentNode)\" \/><\/span><\/li>";

Copier après la connexion

js ajoute dynamiquement le code de l'élément Li (méthode 2)

//方法2：用createElement创建li元素，再通过setAttribute设置元素属性，最后通过appendChild()方法添加在父元素的最后一个子节点上。
 //创建li标签，包含显示姓名，邮箱，电话号码及删除按钮
   function addLi(useName,useEamil,usePhone){
    var li_1=document.createElement("li");
    li_1.setAttribute("class","newLi");
    addSpan(li_1,userName);
    addSpan(li_1,userEamil);
    addSpan(li_1,userPhone);
    addDelBtn(li_1);
document.getElementById("J_List").appendChild(li_1);
   }
   //为姓名或邮箱等添加span标签，好设置样式
   function addSpan(li,text){
   var span_1=document.createElement("span");
    span_1.innerHTML=text;
    li.appendChild(span_1);
   }
  //添加删除按钮及设置删除按钮的样式及添加点击事件
   function addDelBtn(li){
   var span_1=document.createElement("span");
   var btn=document.createElement("button");
   btn.setAttribute("type","button");
   btn.setAttribute("class","delBtn");
   btn.setAttribute("onclick","delBtnData(this)");
   btn.innerHTML="删除";
   span_1.appendChild(btn);
   li.appendChild(span_1);
   }
   //为删除按钮添加删除节点功能
   function delBtnData(obj){
   var ul=document.getElementById("J_List");
    var oLi=obj.parentNode.parentNode; 
    //obj.parentNode指删除按钮的span层
    //obj.parentNode.parentNode为li层
    ul.removeChild(oLi);
   }

Copier après la connexion

Points de connaissance : innerHTML (notez les guillemets doubles "ou besoin d'utiliser / escape).

Points de connaissance : createElement pour créer des éléments, setAttribute à set elements Attribut, innerHTML définit la valeur de l'élément, appendChild ajoute un élément, parentNode obtient le nœud parent (parentNode est la norme W3C, parentElement n'est disponible que dans IE.), RemoveChild supprime le nœud enfant. Je pense que vous l'avez maîtrisé après avoir lu le cas dans cet article. . Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php

Lecture recommandée :

Comment créer dynamiquement des balises et définir des attributs dans js

js génère aléatoirement des nombres aléatoires à 6 chiffres

JS réalise une animation parabolique uniforme

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!