html ul动态添加li,javaScript动态添加Li元素
本文主要为大家分享一篇javaScript动态添加Li元素的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。
html代码块
**javaScript动态添加Li元素**
ul li{list-style:none;display:block;text-align:left;}
ul li span{display:inline-block;margin-top:5px;margin-right:35px;}
//add code
//此处为ul动态添加li元素
js动态添加Li元素代码(方法1)var userName="Tom";
var userEamil="12345678@qq.com";
var userPhone="12345678910";
//方法1:用innerHTML
document.getElementById("J_List").innerHTML+="
"+_userName+""+userEamil+""+userPhone+"
(this.parentNode.parentNode)\" \/>";
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删除子节点。
相关推荐:
html ul动态添加li,javaScript动态添加Li元素相关推荐
- html 如何添加附件,javascript实现添加附件功能的方法
在邮件中我们经常用到添加附件,现在简单的应用下: 效果图: 实现原理: 采用table标签的,主要思想:采用table标签方式 1.点击文字之后,就自动创建(原先是自己/创建,现在拿到table对象之 ...
- php动态增加div,JavaScript动态创建div等元素实例
js动态创建div等元素实例 var Test={ createDiv:function(){ var div = document.createElement('div'); div.id=&quo ...
- JavaScript基础操作——获取元素 id class
通过id的方式获取元素节点 document.getElementById("id_name") <div id="shuzi">123456< ...
- javaScript动态添加Li元素
html代码块 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
- jsp ul设置滚动条_添加滚动条到动态ul li
我搜索了很多帖子和论坛,因为我认为这可能是一个基本的东西,但没有找到它,所以问这里,我所要做的是添加滚动条,如果高度超过一定限度可以说,如果菜单项超过3添加滚动条到动态ul li 如果你不能够访问它, ...
- 【javascript 动态添加数据到 HTML 页面】
今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...
- html动态生成按钮事件,javascript 动态生成按钮并添加事件时为什么不响应?
javascript 动态生成按钮并添加事件时为什么事件不响应?(谢谢大家!) 1)html部分 1 2 3 4 5 6 7 8 9 10 11 12 2)script部分 //_t 为一个现在的Ta ...
- js动态添加控件服务器响应,JS实现动态给标签控件添加事件的方法示例
本文实例讲述了JS实现动态给标签控件添加事件的方法.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans ...
- vue 在v-for列表动态添加ref,并获取对应元素
vue 在v-for列表动态添加ref,并获取对应元素 vue中的ref对于操作dom非常方便,可以直接通过给div加ref,在方法里通过this.$refs.ref的name获取 <templ ...
- JavaScript动态加载ul标签
网上也查了很多关于JavaScript动态加载ul标签的文章,但是感觉不是很全,自己边查边琢磨着代码,给我蒙对了.看看吧! 我想实现的功能很简单,就是查到数据库有数据,就在前台显示<ul> ...
最新文章
- OA办公系统使用之:Tomcat与mysql的几个常见问题
- 中医药可投期刊推荐-24本-2021版
- html border阴影效果_一篇文章教会你使用html+css3制作炫酷效果
- 【Python】Pandas宝藏函数-concat()
- Eclipse之Android项目名有红感叹号的解决办法
- boa服务器实现温湿度显示,SMT车间温湿度分布式远程监控系统的设计
- 【华为云技术分享】小熊派华为物联网操作系统LiteOS裸机驱动移植02-LCD驱动移植及使用
- 四面楚歌的Android工程师该何去何从
- java求最大值时i的值_java 输入一组数组,求最大值。
- PAT 乙级 1054. 求平均值 (20) Java版
- getprivateprofilestring读不到数据_SpringBoot2.x系列教程66--Spring Boot整合分布式事务之数据库事务回顾
- 帆软注册文件_注册信息- FineReport帮助文档|报表开发|报表使用|学习教程
- 装机电脑用什么软件测试,有什么一键装机的软件比较好用?
- 正则表达式(二)常用正则表达式——验证真实姓名
- java定义一个getsize方法_java.util.zip.ZipEntry.getSize()方法示例
- linux下filezilla使用教程,FTP工具filezilla使用教程
- 做一个jQuery插件---带“旋转木马”效果的轮播图
- Exploring Phrase Grounding without Training: Contextualisation and Extension to Text-Based Image Ret
- 群晖存储空间不足-处理方案一
- 其实,我喜欢你很久了。