追加节点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Insert title here</title>

<style type="text/css">

li{border:1px solid red;}

div{border:5px solid green;}

</style>

</head>

<body>

<ul id="ul1"><li>li-1</li><li>li-2</li><li>li-3</li><li>li-4</li><li>li-5</li></ul>

<div id="div1">div-1</div>

<input type="button" value="给ul追加子li"/>

<input type="button" value="给div1追加哥哥"/>

<input type="button" value="把ul下li全部去掉"/>

</body>

</html>

<script type="text/javascript">

var i=0;

document.getElementsByTagName('input')[0].onclick=function(){

    i++;

    ob=document.createElement("li");

    ob.innerHTML="li-"+i;

    document.getElementById("ul1").appendChild(ob);

}

document.getElementsByTagName('input')[1].onclick=function(){

    divOb=document.getElementById("div1");

    ob1=document.createElement("div");

    ob1.innerHTML="div-n";

    document.body.insertBefore(ob1,divOb);

}

document.getElementsByTagName('input')[2].onclick=function(){

    var fOb=document.getElementById('ul1');

    var cOb=document.getElementById('ul1').childNodes;

    alert(cOb.length);

    for(var i=cOb.length-1;i>=0;i--){

        fOb.removeChild(cOb[i]);

    }

}

</script>

javascript追加节点的更多相关文章

  1. 前端之javascript的节点操作和Event

    一 节点的增删改查 创建节点:createElement(标签名):创建一个指定名称的节点. 追加节点: 追加一个子节点:somenode.appendChild(标签名) 指定某个位置前面添加一个节 ...

  2. javascript判断节点是否在dom

    在项目中碰到同事写的一段代码: //焦点必须在实时dom树中 if (ele && typeof this.document.contains === "function&q ...

  3. javascript创建节点的事件绑定

    javascript创建节点的事件绑定 timeupdate事件是<video>中用来返回视频播放进度的事件,绑定在<video>标签返回视频播放位置(每秒计). 现video ...

  4. javascript div元素后追加节点

    例子解释: 这段代码创建新的 <p> 元素: var para=document.createElement("p"); 如需向 <p> 元素添加文本,您必 ...

  5. JavaScript DOM节点和文档类型

    以下的例子以此HTML文档结构为例: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  6. 【转】JavaScript获取节点类型、节点名称和节点值

    DOM节点信息包括节点类型(nodeType).节点名称(nodeName)和节点值(nodeValue). 节点类型 DOM节点中,每个节点都拥有不同的类型.W3C规范中常用的 DOM节点类型有以下 ...

  7. javascript DOM 节点 第18节

    <html> <head> <title>DOM对象</title> </head><body><div >DOM对 ...

  8. JavaScript DOM节点操作总结

    节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...

  9. JavaScript之节点的创建、替换、删除、插入

    1.节点的创建 节点的创建使用document.creatElment();文本节点的创建使用document.creatTextNode();如想把<li>哈密瓜</li>添 ...

随机推荐

  1. day03 python数据类型 数字 字符串 布尔

    day03 python   一.基本数据类型     1.int a= 8 a_length = a.bit_length()  #此方法求数字的二进制长度  print(a_length)     ...

  2. python_django_分页

    分页:把从数据库中的数据分为多页在客户端显示. 在django中,可通过这两个对象来实现: Paginator对象 Page对象 Paginator对象与Page对象的关系: paginator对象调 ...

  3. Python与JAVA的异同

    --效率: 作为静态语言的JAVA执行效率比动态型语言的Python高 --语法: Python语句更精简. JAVA中的所有变量需要先声明(类型),才能使用,Python不需要声明变量类型 Pyth ...

  4. 分布式项目pom

    <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit ...

  5. 洛谷 2327 [SCOI2005]扫雷

    输入输出格式 输入格式: 第一行为N,第二行有N个数,依次为第二列的格子中的数.(1<= N <= 10000) 输出格式: 一个数,即第一列中雷的摆放方案数. 输入输出样例 输入样例#1 ...

  6. Go语言TCP Socket编程

      Golang的主要 设计目标之一就是面向大规模后端服务程序,网络通信这块是服务端 程序必不可少也是至关重要的一部分.在日常应用中,我们也可以看到Go中的net以及其subdirectories下的 ...

  7. nodejs 内存泄漏

    This looks OK at first glance. We could think that theThing get's overwritten with every invocation ...

  8. 1251 client does not support

    1.mysql -uroot -p 123456        (用户root,密码123465) 2.use mysql: 3.ALTER USER 'root'@'localhost' IDENT ...

  9. 10、TestNG 的 FixTrue用法一

    Fixture 是指一个测试运行所需的固定环境,通俗来说 ,为测试用例所准备的环境. 以下是TestNG中可用的注释及其属性的简要概述. 我们先演示@BeforeClass.@AfterClass.@ ...

  10. GDB结合Bochs调试内核

    1. 编译内核 编辑.config文件,相关项目改成如下形式: 1: CONFIG_KGDB=y 2: CONFIG_KGDB_SERIAL_CONSOLE=y 3: CONFIG_MAGIC_SYS ...