javaScript动态添加Li元素的实例

html代码块

公司主营业务:网站设计、成都做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联建站是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联建站推出交城免费做网站回馈大家。



 
  
   **javaScript动态添加Li元素**
   
   
   
   //此处为ul动态添加li元素
   

js动态添加Li元素代码(方法1)

 var userName="Tom";
 var userEamil="12345678@qq.com";
 var userPhone="12345678910";
 //方法1:用innerHTML
document.getElementById("J_List").innerHTML+="
  • "+_userName+"<\/span>"+userEamil+"<\/span>"+userPhone+"<\/span><\/span><\/li>";
  • js动态添加Li元素代码(方法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);
       }  

    知识点:innerHTML(需注意双引号”或\ 需用 / 转义)。

    知识点:createElement创建元素,setAttribute设置元素属性,innerHTML设置元素值,appendChild添加元素,parentNode获取父节点(parentNode是W3C标准的,parentElement 只在IE中可用. ),removeChild删除子节点。

    以上这篇javaScript动态添加Li元素的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持创新互联。


    当前题目:javaScript动态添加Li元素的实例
    地址分享:http://myzitong.com/article/gicioe.html