创建DOM元素
createElement(标签名)  创建一个节点
appendChild(节点)  追加一个节点
例子:为ul插入li
插入元素
insertBefore(节点, 原有节点)  在已有元素前插入
例子:倒序插入li
删除DOM元素
removeChild(节点)  删除一个节点
例子:删除li
 
文档碎片
文档碎片可以提高DOM操作性能(理论上)
文档碎片原理
document.createDocumentFragment()
 
                                                                            创建 <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>
                                                                                 删除<li>
 
 

 <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>的更多相关文章

  1. 多个ul中第一个li获取定位

    如果我们只是获取一个ul中的第一个li的话,那么我们可以这样写: $("ul li:first"); $("ul li").eq(0); $("ul ...

  2. 通过jquery获取ul中第一个li的属性

    当加载列表时,默认希望选中第一条.top_menu 为ul的ID 通过 $("#top_menu li:first") 就可以获取到 ul下第一个li标签.然后就可以利用 例如 修 ...

  3. 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

    getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...

  4. 关于JavaScript中的事件代理(例子:ul中无数的li上添加点击事件)

    面试题:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标点击时alert出这个li的内容和li的位置坐标xy. 看到这个题目,我们一般首先想到的思路是,for循环,遍历1000次 ...

  5. JavaScript DOM高级程序设计2.1创建可重用的对象--我要坚持到底!

    1.对象中包含什么 在javascript中,从函数到字符串实际上都是对象 继承 //创建一个person对象的实例 var penson={}; person.getName=function(){ ...

  6. jquery中怎么删除<ul>中的整个<li>包括节点

    .$('ul li').remove(); .$('ul li').each(function(){ $(this).remove(); }); .$("ul").find(&qu ...

  7. Html中怎么用CSS让ul中多个li标签不换行横排显示

    布局 通常有三种方式 { 1. position 2. float: left --> 其次是这个 3. block: inline-block  --> 他们推荐我用这个 } 具体描述 ...

  8. angular或者js如何确定选中ul中的哪几个li

    刚来新公司接到新的需求做一个知识库页面 红色的是单选    蓝色的是多选     这些都是需要传递到后台的 开始不知道如何解决  下班后在家想到一个很巧妙的办法  不多说上代码 箭头所指就是在li里写 ...

  9. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

随机推荐

  1. 用Html5结合Qt制作一款本地化EXE游戏-太空大战(Space War)

    本次来说一说如何利用lufylegend.js引擎制作一款html5游戏后将其通过Qt转换成EXE程序.步骤其实非常简单,接下来就一步步地做一下解释和说明. 首先我们来开发一个有点类似于太空大战的游戏 ...

  2. 使用LINQ的几个小技巧

    这里总结了这些技巧.介绍如何使用LINQ来: 初始化数组 在一个循环中遍历多个数组 生成随机序列 生成字符串 转换序列或集合 把值转换为长度为1的序列 遍历序列的所有子集 如果你在LINQ方面有心得也 ...

  3. Webform中Repeater控件--绑定嵌入C#代码四种方式

    网页里面嵌入C#代码用的是<% %>,嵌入php代码<?php ?> 绑定数据的四种方式: 1.直接绑定 <%#Eval("Code") %> ...

  4. 第10季asp.net基础

    什么是ASP.Net: ASP.Net是一种动态网页技术,在服务器端运行.Net代码,动态生成HTML.可以使用javascript.Dom在浏览器端完成很多工作,但是有很多工作无法在浏览器端完成,比 ...

  5. Raspberry 3安装docker

    SD卡制作 准备一张4GB或者以上的micro sd卡,下载系统镜像,例如raspbian-jessie-lite.img,并使用刷机工具,如Pi filler将其写入sd卡,当然也可以使用命令行的d ...

  6. ARM异常---一个Uart中断的触发处理过程:

    首先给出一些定义: //2440addr.inc INTOFFSET EQU 0x4a000014 ;Interruot request source offset //option.inc _ISR ...

  7. qnx:从API开始理解QNX -- 消息传递

    从API开始理解QNX -- 消息传递    http://www.openqnx.com/chinese/viewtopic.php?f=5&t=2161 1. 频道与连接    Chann ...

  8. centos下卸载jdk

    链接地址:http://blog.csdn.net/shuixin536/article/details/8954011 http://sunqiusong.email.blog.163.com/bl ...

  9. C# Thread Programming Start

    引言 1.理解多线程 2. 线程异步与线程同步 3.创建多线程应用程序 3.1通过System.Threading命名空间的类构建 3.1.1异步调用线程 3.1.2并发问题 3.1.3线程同步 3. ...

  10. asp.net插入sql server 中文乱码问题解决方案

    创建数据库的代码---创建promary表 create table promary ( proID int primary key, proName varchar(50) not null ) 出 ...