追加节点

<!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. codeforces847J Students Initiation 网络流

    题目传送门 题意: 有n个人,m对关系,要求每对关系中,有且仅有一个人给另外一个人送礼物,并且使送出礼物最多的人送的礼物尽可能少.并输出送礼物的方案. 思路:这道题麻烦的是网络流模型的转换(废话). ...

  2. xshell安装错解决方案

    之前安装过XShell后来因为各种原因不能使用了,卸载和再次安装的时候安装一直失败.研究了好久终于找到解决方案. 只需要删除在C:\Program Files (x86)\InstallShield ...

  3. 使用appium1.4在android8.0真机上测试程序时报错command failed shell "ps 'uiautomator'"的解决方式

    appium1.4,运行自动化脚本时提示 org.openqa.selenium.SessionNotCreatedException: A new session could not be crea ...

  4. MySQL不支持事务处理的解决方法

    MySQL数据库默认的存储引擎类型是MyISAM,这种存储引擎类型不支持事务处理. 在MySQL中,只有InnoDB存储引擎类型的数据表才能支持事务处理. 因此,如果想让MySQL支持事务处理,只要将 ...

  5. vue基础三

    1.模板语法 在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数.如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染(render)函数,使用可 ...

  6. nuxt 2.0采坑计之 （引入静态文件css）

    nuxt 2.0采坑计之静态文件css 外部引入css 全局引用方法为   (在nuxt.config.js配置中在   module.exports = {}  中添加) head: { meta: ...

  7. 2019杭电多校第三场hdu6608 Fansblog(威尔逊定理)

    Fansblog 题目传送门 解题思路 Q! % P = (P-1)!/(P-1)...(Q-1) % P. 因为P是质数,根据威尔逊定理,(P-1)!%P=P-1.所以答案就是(P-1)((P-1) ...

  8. 【转】HTML5标签使用的常见误区

    最近组内进行 HTML5标签的学习,方法呢就是大家每人挑选几个标签,自己先去学习,然后给大家作讲解.这个过程大家还是挺有收获的.但是现在HTML5还处在草案阶 段,有些新的标签元素的解释也是经常有变化 ...

  9. Java 设计模式之 装饰者模式

    装饰者模式(Decorator Pattern): 概述:装饰模式是在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象 特点: (1) ...

  10. WebStorage篇

    [WebStorage篇] 用户登录状态.计数器或者小游戏等,但是又不希望用到数据库,就可以利用Web Storage技术将数据存储在用户浏览器中. Web Storage是一种将少量数据存储在客户端 ...