Maison > Article > interface Web > Comment ajouter dynamiquement une instance de l'élément Li en javaScript

Comment ajouter dynamiquement une instance de l'élément Li en javaScript

亚连original: 2018-06-04 17:52:322217parcourir

Ci-dessous, je vais partager avec vous un exemple d'ajout dynamique d'éléments Li en javaScript. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

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>

js dynamique Ajouter 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>";

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

Point de connaissance : innerHTML (notez les guillemets doubles" Ou vous devez vous échapper avec /).

Points de connaissance : createElement crée des éléments, setAttribute définit les attributs des éléments, innerHTML définit les valeurs des éléments, appendChild ajoute des éléments et parentNode obtient. le nœud parent (parentNode est la norme W3C, parentElement n'est disponible que dans IE.), RemoveChild supprime les nœuds enfants

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles Liés

Voir plus