Heim > Artikel > Web-Frontend > So fügen Sie ein Li-Element in jS hinzu

So fügen Sie ein Li-Element in jS hinzu

php中世界最好的语言Original: 2018-03-17 14:34:414640Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie das Li-Element zu jS hinzufügen. Was sind die Vorsichtsmaßnahmen für das Hinzufügen des Li-Elements zu jS?

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 dynamisch Li-Elementcode hinzu (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);
   }

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

Wissenspunkte: createElement zum Erstellen von Elementen, setAttribute auf set elements Attribut, innerHTML legt den Elementwert fest, appendChild fügt ein Element hinzu, parentNode erhält den übergeordneten Knoten (parentNode ist W3C-Standard, parentElement ist nur im IE verfügbar). Ich glaube, Sie haben es gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So erstellen Sie dynamisch Tags und legen Attribute in js fest

js generiert zufällig 6-stellige Zufallszahlen

JS erstellt eine gleichmäßige parabolische Animation

Das obige ist der detaillierte Inhalt vonSo fügen Sie ein Li-Element in jS 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：Was sind die am häufigsten verwendeten Meldungsfelder in JS?Nächster Artikel：Was sind die am häufigsten verwendeten Meldungsfelder in JS?

In Verbindung stehende Artikel

Mehr sehen