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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
读取input:file的路径并显示本地图片的方法
Sep 23 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
微信小程序获取当前位置和城市名
Nov 13 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
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.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
jquery uaMatch源代码
2011/02/14 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
python编写的最短路径算法
2015/03/25 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
服务中心夜班服务员岗位职责
2013/11/27 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
协议书与合同的区别
2014/04/18 职场文书
创业培训计划书
2014/05/03 职场文书
倡议书范文格式
2014/05/12 职场文书
产品发布会策划方案
2014/05/12 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
2015年安全生产责任书
2015/01/30 职场文书