脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javaScript动态添加Li元素

javaScript动态添加Li元素的实例

 更新时间：2018年02月24日 09:06:58   作者：CSDN_杨小彦  
下面小编就为大家分享一篇javaScript动态添加Li元素的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

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动态添加Li元素代码（方法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动态添加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 Blob对象实现文件下载

    javascript Blob对象实现文件下载

    这篇文章主要为大家介绍了vue组件通信的几种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-12-12
  • JS图片预加载三种实现方法解析

    JS图片预加载三种实现方法解析

    这篇文章主要介绍了JS图片预加载三种实现方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • webpack自定义loader全面详解

    webpack自定义loader全面详解

    这篇文章主要为大家介绍了webpack自定义loader全面详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • json对象和formData相互转换的方式详解

    json对象和formData相互转换的方式详解

    我们有两种常见的传参方式： JSON 对象格式和 formData 格式，但是一些场景是需要我们对这两种数据格式进行转换的，这篇文章主要介绍了json对象和formData相互转换的方式详解,需要的朋友可以参考下
    2023-02-02
  • JavaScript判断对象、数组是否包含某个属性、某个值的方法

    JavaScript判断对象、数组是否包含某个属性、某个值的方法

    这篇文章主要给大家介绍了关于JavaScript判断对象、数组是否包含某个属性、某个值的相关资料,我们在实际的开发过程中,经常需要判断对象/数组是否包含某个属性或者某个值,需要的朋友可以参考下
    2023-09-09
  • 利用js canvas实现五子棋游戏

    利用js canvas实现五子棋游戏

    这篇文章主要为大家详细介绍了利用js canvas实现五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • bootstrap suggest下拉框使用详解

    bootstrap suggest下拉框使用详解

    这篇文章主要为大家详细介绍了bootstrap suggest js下拉框的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 前端通过表单将pdf等文件传入后端

    前端通过表单将pdf等文件传入后端

    在一些情境下,用户通过浏览器上传word、excel、pdf等各种类型的文件到系统,上传后可以随时下载,下面这篇文章主要介绍了前端通过表单将pdf等文件传入后端的相关资料,需要的朋友可以参考下
    2024-09-09
  • 比较详细的XMLDOM对象方法详解

    比较详细的XMLDOM对象方法详解

    主要介绍了一些xml dom对象的使用方法
    2008-08-08
  • JavaScript实现拖动滑块拼图验证功能（html5、canvas）

    JavaScript实现拖动滑块拼图验证功能（html5、canvas）

    这篇文章主要介绍了JavaScript实现拖动滑块拼图验证（html5、canvas）,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-03-03

最新评论