javascript追加节点
追加节点
<!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追加节点的更多相关文章
- 前端之javascript的节点操作和Event
一 节点的增删改查 创建节点:createElement(标签名):创建一个指定名称的节点. 追加节点: 追加一个子节点:somenode.appendChild(标签名) 指定某个位置前面添加一个节 ...
- javascript判断节点是否在dom
在项目中碰到同事写的一段代码: //焦点必须在实时dom树中 if (ele && typeof this.document.contains === "function&q ...
- javascript创建节点的事件绑定
javascript创建节点的事件绑定 timeupdate事件是<video>中用来返回视频播放进度的事件,绑定在<video>标签返回视频播放位置(每秒计). 现video ...
- javascript div元素后追加节点
例子解释: 这段代码创建新的 <p> 元素: var para=document.createElement("p"); 如需向 <p> 元素添加文本,您必 ...
- JavaScript DOM节点和文档类型
以下的例子以此HTML文档结构为例: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 【转】JavaScript获取节点类型、节点名称和节点值
DOM节点信息包括节点类型(nodeType).节点名称(nodeName)和节点值(nodeValue). 节点类型 DOM节点中,每个节点都拥有不同的类型.W3C规范中常用的 DOM节点类型有以下 ...
- javascript DOM 节点 第18节
<html> <head> <title>DOM对象</title> </head><body><div >DOM对 ...
- JavaScript DOM节点操作总结
节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...
- JavaScript之节点的创建、替换、删除、插入
1.节点的创建 节点的创建使用document.creatElment();文本节点的创建使用document.creatTextNode();如想把<li>哈密瓜</li>添 ...
随机推荐
- Tensorflow的基础用法
简介 Tensorflow是一个深度学习框架,它使用图(graph)来表示计算任务,使用tensor(张量)表示数据,图中的节点称为OP,在一个会话(Session)的上下文中执行运算,最终产生ten ...
- redis搭建主从
主从概念 ⼀个master可以拥有多个slave,⼀个slave⼜可以拥有多个slave,如此下去,形成了强⼤的多级服务器集群架构 master用来写数据,slave用来读数据,经统计:网站的读写比率 ...
- 通过lua进行nginx的权限控制
nginx_lua的安装 nginx使用luajit进行编译安装 使用openresty进行yum安装 openresty中将lua和nginx进行封装,详情可查看openresty官网 openre ...
- Java中的可变参数和asList方法
可变参数: List.of
- linux IPC的信号量
信号量相关函数原型 获得一个信号量ID #include <sys/types.h> #include <sys/ipc.h> #include <sys/sem.h&g ...
- Linux 常用的一些操作
1.查看linux中某个端口是否被占用 1> 使用lsof lsof -i:端口号 查看该端口是否被占用 2> 使用netstat netstat -antpu |grep 80 ...
- JVM内存分为哪几部分?各个部分的作用是什么?
JVM内存区域分为五个部分,分别是堆,方法区,虚拟机栈,本地方法栈,程序计数器. 堆. 堆是Java对象的存储区域,任何用new字段分配的Java对象实例和数组,都被分配在堆上,Java堆可使用-Xm ...
- delphi 文件操作（信息获取）
delphi获取Exe文件版本信息的函数 Type TFileVersionInfo = Record FixedInfo:TVSFixedFileInfo; {版本信息} CompanyName:S ...
- nuxt 2.0采坑计之 （引入静态文件css）
nuxt 2.0采坑计之静态文件css 外部引入css 全局引用方法为 (在nuxt.config.js配置中在 module.exports = {} 中添加) head: { meta: ...
- debian 8 安装 codeblocks
CodeBlocks优点: 1.所占资源少,对电脑硬件的要求低 2.开源软件,可以查看源代码,虽然我不会修改,但是如果我做一个IDE的话,我一定会参考这个伟大的软件的. 3.最重要的是,它完全跨了三大 ...