javaScript动态添加Li元素的实例


Posted in Javascript onFebruary 24, 2018

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 相关文章推荐
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
vue实现购物车列表
Jun 30 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
jquery动态添加带有样式的HTML标签元素方法
Feb 24 #jQuery
node.js中fs文件系统目录操作与文件信息操作
Feb 24 #Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 #jQuery
使用puppeteer破解极验的滑动验证码
Feb 24 #Javascript
Vue的elementUI实现自定义主题方法
Feb 23 #Javascript
elementui的默认样式修改方法
Feb 23 #Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 #Javascript
You might like
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
PHP数组实例总结与说明
2011/08/23 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
Javascript 布尔型分析
2008/12/22 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
python使用PyCharm进行远程开发和调试
2017/11/02 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
python如何使用代码运行助手
2020/07/03 Python
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
环境工程专业个人求职信
2013/12/05 职场文书
办公室内勤工作职责
2013/12/11 职场文书
商场中秋节活动方案
2014/02/07 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
售后服务承诺书
2014/03/26 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
2015年电教工作总结
2015/05/26 职场文书
python中__slots__节约内存的具体做法
2021/07/04 Python