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>添 ...
随机推荐
- Android 如何使edittext默认失去焦点
1.在布局文件中给edittext的父控件增加两个属性 android:focusable="true" android:focusableInTouchMode="tr ...
- jq 手机键盘消失出现白色延迟
input 输入框失去焦点 $("#input").blur() 接口调用setTimeout 让输入框消失后再出现loading和调用接口 ios手机loading覆盖不完全 自 ...
- AC自动机处理多串匹配——cf1202E
si+sj中间有一个切割点,我们在t上枚举这个切割点i,即以t[i]作为最后一个字符时求有多少si可以匹配,以t[i+1]作为第一个字符时有多少sj可以匹配 那么对s串正着建一个ac自动机,反着建一个 ...
- Shell基础(二)：Shell中的数值运算、条件测试操作、使用if选择结构
一.Shell中的数值运算 目标: 本案例要求熟悉Linux Shell环境的特点,主要练习以下操作: 1> 使用expr.$[ ].let等整数运算工具:定义变量X=1234,然后计算X与78 ...
- Jquery轻量级插件--操作URL
调用: > "?action=view§ion=info&id=123&debug&testy[]=true&testy[]=false ...
- ASP.NET Core学习——前言
跌跌撞撞,公司的新项目终于要在这个月月底上线. 新项目使用ASP.NET Core来做,以前没接触过这方面的内容,只能一边学习,一边搞开发. 眼看项目上线在即,工作没那么忙,也不需要天天加班. 回想了 ...
- Dubbo入门到精通学习笔记（五）：持续集成管理平台之sonarqube代码质量管理平台的介绍与安装
文章目录 SonarQube的介绍 SonarQube的安装 安装简介 详细安装过程 详细使用过程 SonarQube的介绍 SonarQube是一个管理代码质量的开放平台. 可以从七个维度检测代码质 ...
- Linux关闭端口
1. 查看哪些端口被占用 $ netstat -anp | grep 2042 tcp 0 0 192.168.56.1:2042 0.0.0.0:* LISTEN 8974/python 2. 删 ...
- vs设置html的模板快
打开vs编辑器,点击文件-->首选项-->用户代码片段 之后选择先对应的编辑器模板 进入里面编写相对应的代码块 之后直接在编辑器中调用.
- testNG官方文档翻译-3 testng.xml
你可以通过以下几种不同的方法触发TestNG: 用一个testng.xml文件 使用ant 从命令行触发 这个章节将会介绍testng.xml的格式(你也可以在下面找到关于ant和命令行的内容). 关 ...