Javascript DOM 02 在<ul>中创建、删除 <li>
<script>
window.onload= function ()
{
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ull');
var ali=document.getElementsByTagName('li');
var oTxt=document.getElementById('txt');
oBtn.onclick=function ()
{
var oLi=document.createElement('li');
//父级.appendChild(子节点);
//oUl.appendChild(oLi);//在已有元素后插入
oLi.innerHTML=oTxt.value;
//oUl.insertBefore(oLi,ali[0]);//在任意元素前插入
//为了兼容， 最好选择下面这种方法,原因是有时ul里会没有li标签
//alert(ali.length);//判断li的个数
if(ali.length>0)
{
oUl.insertBefore(oLi,ali[0]);
}
else{oUl.appendChild(oLi); }
} }
</script>
</head> <body> <div id="divId">
<input type="text" id="txt"/>
<input type="button" id="btn1" value="创建 li"/>
<ul id="ull">
<li>jgjghmjnhg</li>
<li>1234255535</li>
<li>vmhmbmbmbh</li>
<li>6878987978</li>
</ul> </div> </body>
<script>
window.onload= function ()
{
var aHref=document.getElementsByTagName('a');
var oUl=document.getElementById('ull');
for(var i=0 ; i<aHref.length;i++)
{
aHref[i].onclick=function ()
{
oUl.removeChild(this.parentNode);
}
} }
</script>
</head> <body> <div id="divId"> <ul id="ull">
<li>jgjghmjnhg <a href="javascript:;">删除</a></li>
<li>1234255535 <a href="javascript:;">删除</a></li>
<li>vmhmbmbmbh <a href="javascript:;">删除</a></li>
<li>6878987978 <a href="javascript:;">删除</a></li>
</ul> </div> </body>
javascript DOM 基础篇 01 ： http://www.cnblogs.com/izhiniao/p/3698464.html
Javascript DOM 02 在<ul>中创建、删除 <li>的更多相关文章
- 多个ul中第一个li获取定位
如果我们只是获取一个ul中的第一个li的话,那么我们可以这样写: $("ul li:first"); $("ul li").eq(0); $("ul ...
- 通过jquery获取ul中第一个li的属性
当加载列表时,默认希望选中第一条.top_menu 为ul的ID 通过 $("#top_menu li:first") 就可以获取到 ul下第一个li标签.然后就可以利用 例如 修 ...
- 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)
getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...
- 关于JavaScript中的事件代理（例子：ul中无数的li上添加点击事件）
面试题:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标点击时alert出这个li的内容和li的位置坐标xy. 看到这个题目,我们一般首先想到的思路是,for循环,遍历1000次 ...
- JavaScript DOM高级程序设计2.1创建可重用的对象--我要坚持到底！
1.对象中包含什么 在javascript中,从函数到字符串实际上都是对象 继承 //创建一个person对象的实例 var penson={}; person.getName=function(){ ...
- jquery中怎么删除<ul>中的整个<li>包括节点
.$('ul li').remove(); .$('ul li').each(function(){ $(this).remove(); }); .$("ul").find(&qu ...
- Html中怎么用CSS让ul中多个li标签不换行横排显示
布局 通常有三种方式 { 1. position 2. float: left --> 其次是这个 3. block: inline-block --> 他们推荐我用这个 } 具体描述 ...
- angular或者js如何确定选中ul中的哪几个li
刚来新公司接到新的需求做一个知识库页面 红色的是单选 蓝色的是多选 这些都是需要传递到后台的 开始不知道如何解决 下班后在家想到一个很巧妙的办法 不多说上代码 箭头所指就是在li里写 ...
- JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
随机推荐
- 最新VMware Workstation 10注册码，绝对可用！
最近公司要在solaris上测试产品,需要用到虚拟机,于是下载了最新的虚拟机VMware Workstation 10,并找到了破解码,与大家共享: VMware workstation 10破解序列 ...
- IOC容器初始化——BeanDefinition的Resource定位
以编程的方式使用DefaultListableBeanFactory时,首先定义一个Resource来定位容器使用的BeanDefinition.这是使用的是ClassPathResource,意味着 ...
- PHP 导入excel
db.php为数据库操作类, $config为数据库配置,PHPExcel版本为PHPExcel_1.8.0, PHP代码: header("Content-type:text/html; ...
- UnixShell编程(第三版)
这本书相当老了,04年的,现在 在linux上做实验. 1,date 显示日期. 2,who 显示用户,who am i 3,echo 后面字符串会全部输出,,会过滤掉多余空格,单双引号,分号等. ...
- C语言循环小技巧
写代码,有两类追求,一种是追求实用(Coder),一种是追求代码艺术(Artist) 我是那种追实用追腻了,偶然追一下艺术(就是偶然和艺术有一腿)的那种Coder 很多人,已经习惯了for(i=0; ...
- hibernate 事务的隔离级别 5.1
脏读不可重复读幻读可序列化(符合事务的四个特性的正常情况 ) 解释: 脏读:事务A对数据1做了更新,但是还没有来得及提交 此时事务B对数据1进行了查询获得了事务A更新后的数据, 但是事务A因为一些原因 ...
- 51cto培训课程
课程: 云计算: OpenStack | 虚拟化 | 云平台 | Office 365 | 云服务 | Docker | 其他 大数据: Spark | Hadoop | Storm | Hive | ...
- Android apk逆向实战
简介 逆向Android apk其实是一个分析Android apk的一个过程,必须了解Android程序开发的流程.结构.语句分支.解密原理等等. 功能 破解一个注册验证程序(自写一个简单的注册验证 ...
- Physiological Processes of Speech Production--Reading Notes (8)
Upper Jaw The upper jaw, or the maxilla with the upper teeth, is the structure fixed to the skull, f ...
- 菜鸟系列之C/C++经典试题(七)
找含单链表的环入口点 :怎样推断单链表中是否存在环(即下图中从结点E到结点R组成的环)? ,则在low进入环后继续绕环遍历一周之前fast必定能与low重合(且必定是第一次重合).于是函数可写例如以下 ...