suchen

Heim >Web-Frontend >js-Tutorial >So fügen Sie dynamisch eine Instanz eines Li-Elements in JavaScript hinzu

So fügen Sie dynamisch eine Instanz eines Li-Elements in JavaScript hinzu

亚连
亚连Original
2018-06-04 17:52:322255Durchsuche

Im Folgenden werde ich Ihnen ein Beispiel für das dynamische Hinzufügen von Li-Elementen in JavaScript vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

HTML-Codeblock

<!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 fügt Li dynamisch hinzu Elementcode (Methode 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 fügt dynamisch Li-Elementcode hinzu (Methode 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);
   }

Wissenspunkt: innerHTML (beachten Sie die doppelten Anführungszeichen oder müssen / Escape verwenden ).

Wissenspunkte: createElement erstellt Elemente, setAttribute legt Elementattribute fest, innerHTML legt Elementwerte fest, appendChild fügt Elemente hinzu und parentNode ruft den übergeordneten Knoten ab (parentNode ist). Ein W3C-Standard, parentElement ist nur im IE verfügbar.) RemoveChild löscht den untergeordneten Knoten

Das Obige ist das, was ich für alle zusammengestellt habe

Verwandte Artikel:

So ändern Sie den Projektnamen über das vue-cli+webpack-Projekt

So implementieren Sie Debugging und unabhängiges Packen Konfigurationsdateien über das Webpack-Projekt (ausführliches Tutorial)

So verwenden Sie vue+webpack, um das 404-Leerseitenproblem gepackter Dateien zu lösen

Das obige ist der detaillierte Inhalt vonSo fügen Sie dynamisch eine Instanz eines Li-Elements in JavaScript hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie das JQuery-Framework in jsNächster Artikel：So verwenden Sie das JQuery-Framework in js

In Verbindung stehende Artikel

Mehr sehen