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>添 ...
随机推荐
- spring boot 项目的创建
一. 进入https://start.spring.io 快速创建项目 二. 利用eclipse sts插件创建项目 1. 安装sts插件 进入https://spring.io/tools3/sts ...
- kubeadm部署多master节点高可用k8s1.16.2
一.架构信息 系统版本:CentOS 7.6 内核:3.10.0‐1062.4.1.el7.x86_64 Kubernetes: v1.16.2 Dockerce: 19.03 推荐硬件配置:2核4 ...
- Jenkins使用admin修改安全矩阵的时候报错“admin没有Overall/Read权限”
1.注册完Jenkins,然后使用admin用户登录,报错“admin没有Overall/Read权限”: 2.因为我自己的Jenkins是放在tomcat/webapps的目录下的,所以Jenkin ...
- delphi 时间
DELPHI高精度计时方法 //取毫秒级时间精度(方法一): var t1,t2:int64; r1:int64; begin t1:=GetTickCount;//获取开始计数 WINDOWS AP ...
- 炼数成金数据分析课程---10、python中如何画图
炼数成金数据分析课程---10.python中如何画图 一.总结 一句话总结: 主要matplotlib库,pandas中也可以画一些基础图 大纲+实例快速学习法 1.matplotlib的最简单画图 ...
- elasticsearch5.5.2安装
elasticsearch5.x安装中一些问题的解决办法 最近在学习elk,由于编译安装使用5.2.1版本的elasticsearch,所以遇到了很多问题,下面是一些问题及解决办法. 1.修改访问e ...
- 一个小BUG引发的思考。（论开发与测试之间的那点事）
标题不是“一个馒头引发的血案”. 言归正传:今天上午测试的时候,发现了一个BUG,如图: 一个用肉眼就能发现的BUG.原因当然是因为开发同事没有自测试,流入到了测试人员这里了. 无非是开发同事不严谨造 ...
- 在jeecg中如何配置多对一和多对多的关系
多对多: mappedBy指的是当前的类对应的表, cascade属性的可能值有 all: 所有情况下均进行关联操作,即save-update和delete. none: 所有情况下均不进行关联操作. ...
- 数据挖掘Aprior算法详解及c++源码
[算法大致描述] Aprior算法主要有两个操作,扫描数据库+统计.计算每一阶频繁项集都要扫描一次数据库并且统计出满足支持度的n阶项集. [算法主要步骤] 一.频繁一项集 算法开始第一步,通过扫描数据 ...
- UVA 10005 Packing polygons(最小圆覆盖)
裸的模板题 AC代码: #include<cstdio> #include<cmath> #include<algorithm> #include<iostr ...