追加节点

<!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. Codeforces 319C DP 斜率优化

    题意:在一颗森林有n颗数,编号从1到n,第i棵树高度是a[i].有一个伐木工想要砍伐这片森林,它的电锯每次可以将树的高度减少1,然后就必须要充电,充电的代价是他已经砍倒的树种编号最大的那颗树的代价(b ...

  2. Linux下Golang Socket编程原理分析与代码实现

    在POSIX标准推出后,socket在各大主流OS平台上都得到了很好的支持.而Golang是自带Runtime的跨平台编程语言,Go中提供给开发者的Socket API是建立在操作系统原生Socket ...

  3. mongodb的学习 （2）

    1.条件查询 查询姓名为小明的学生                            db.local.find({name:'小明'});; 查询英语成绩大于90分的同学            ...

  4. 谷歌浏览器srcoll时,控制台一直报错

    如果是使用betheme-child主题,在wp后台去掉这个srcoll插件 目录是wp后台的Betheme——Theme Options——Addons & Plugins——Addons— ...

  5. magento开发必备插件列表汇总

    magento和wordpress一样,因为开放而倍加优秀 ,搜集下常用的magento插件以便大家使用时更加方便快捷 导航放到右侧:magento-community/RicoNeitzel_Ver ...

  6. 性能超过DRUID的最强数据库连接池——HikariCP相关配置及简单示例

    在配置application.yml时,对hikari的配置会有这样一个字段validationQuery. validationQuery是用来验证数据库连接的查询语句,这个查询语句必须是至少返回一 ...

  7. Android Dialog对话框的七种形式的使用

    参考资料:http://www.oschina.net/question/54100_32486 注:代码进行了整理 在Android开发中,我们经常会需要在Android界面上弹出一些对话框,比如询 ...

  8. html 视频播放器

    html  视频播放器 <html> <script> /** *视频播放 *参数说明 u - 媒体URL w - 媒体宽度width h - 媒体高度height */ // ...

  9. 工具类--map 转成xml xml转成map

    public class WxChatReq { /** * Map转换成XML * @param data * @return * @throws Exception */ public stati ...

  10. could not stop cortex-m device

    检查一下STM32复位管脚是不是0V,如果是0V的话并且你有上拉电阻,那么就断电后检查一下STM32的VCC和GND是否短路,我的就是两个贴片电容击穿造成的短路从而使RST无法拉高.