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元素的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

微信小程序如何获取openid及用户信息
这篇文章主要介绍了微信小程序如何获取openid及用户信息，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01
JS实现数组浅拷贝和深拷贝的方法
浅拷贝创建一个新的对象,来接受重新复制或引用的对象值,如果对象属性是基本的数据类型,复制的就是基本类型的值给新对象,这篇文章主要介绍了js实现数组浅拷贝和深拷贝,需要的朋友可以参考下
2024-01-01
Js nodeType 属性全面解析
本文是对Js nodeType的属性进行了全面分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
layui-select动态选中值的例子
今天小编就为大家分享一篇layui-select动态选中值的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
javascript-hashchange事件和历史状态管理实例分析
这篇文章主要介绍了javascript-hashchange事件和历史状态管理,结合实例形式分析了javascript-hashchange基本功能、原理及历史状态管理相关操作技巧,需要的朋友可以参考下
2020-04-04
javascript 关于赋值、浅拷贝、深拷贝的个人理解
关于赋值、浅拷贝、深拷贝，以前也思考良久，很多时候都以为记住了，但是，我太难了。今天我特地写下笔记，希望可以完全掌握这个东西，也希望可以帮助到任何想对学习这个东西的同学
2019-11-11
js判断浏览器是否支持严格模式的方法
除了正常运行模式，ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。这篇文章给大家详细介绍了js判断浏览器是否支持严格模式的方法，有需要的朋友们可以参考借鉴。
2016-10-10
js 随机数代码大全
很多情况下，需要用到随机数，脚本之家特为大家整理了一些具体的使用与说明。
2010-08-08
原生js实现淘宝放大镜效果
这篇文章主要为大家详细介绍了原生js实现放大镜效果，制作一个类似于淘宝的放大镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
一秒学会微信小程序制作table表格
这篇文章主要教大家一秒学会微信小程序制作table表格，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-02-02