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的.live()和.die() 使用介绍
Sep 10 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
js格式化时间的简单实例
Nov 27 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
js实现模拟购物商城案例
May 18 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数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
Extjs 几个方法的讨论
2010/01/28 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
户外用品商店创业计划书
2014/01/29 职场文书
班班通项目实施方案
2014/02/25 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
mysql 索引合并的使用
2021/08/30 MySQL
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
Java 多线程并发FutureTask
2022/06/28 Java/Android