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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
javascript中可能用得到的全部的排序算法
Mar 05 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脚本的10个技巧(2)
2006/10/09 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
python安装以及IDE的配置教程
2015/04/29 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
python仿抖音表白神器
2019/04/08 Python
python实现文字版扫雷
2020/04/24 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
python数据抓取3种方法总结
2021/02/07 Python
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
会计专业自荐信
2014/06/03 职场文书
南京青奥会口号
2014/06/12 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
青岛导游词
2015/02/12 职场文书
大学生入党自传2015
2015/06/26 职场文书
设置IIS Express并发数
2022/07/07 Servers