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>添 ...
随机推荐
- HIVE了解及SQL基础命令
hive(数据仓库工具) Hive是一个数据仓库基础工具在Hadoop中用来处理结构化数据.它架构在Hadoop之上,总归为大数据,并使得查询和分析方便.并提供简单的sql查询功能,可以将sql语句转 ...
- es的日期格式
https://www.elastic.co/guide/en/elasticsearch/reference/2.3/mapping-date-format.html 在es中,默认的时间类型为da ...
- Ubuntu图形界面和终端界面切换快捷键
Ctrl+Alt+F1可以从图形界面切换到终端界面. Ctrl+Alt+F7可以从终端界面退出来,重新回到图形界面
- leetcode-12双周赛-1245-树的直径
题目描述: 方法一:深度优先: class Solution: def treeDiameter(self, edges: List[List[int]]) -> int: adjacency ...
- drag事件
<!DOCTYPE HTML><html> <head> <title>拖动事件</title> <style> ...
- JAVA调用R脚本
0 前言R是一种非常方便易用的绘图.统计分析.ML算法设计方面的脚本语言.实际中有这样一种场景:算法工程师用R搭建了机器学习算法模型,想用于javaweb之中但是又不想重新用java写一遍算法模型,那 ...
- mongodb update操作
//修改字段名称,把synonymsList表的name_status修改为status db.getCollection('synonymsList').update({}, {$rename : ...
- Java【并发】面试题
精尽 Java[并发]面试题 以下面试题,基于网络整理,和自己编辑.具体参考的文章,会在文末给出所有的链接. 如果胖友有自己的疑问,欢迎在星球提问,我们一起整理吊吊的 Java[并发]面试题的大保健. ...
- Django框架（十一）—— 常用字段、参数、元信息、多对多关联关系
目录 常用字段和参数 一.ORM字段 二.ORM参数 三.关系字段 1.ForeignKey 2.OneToOneFiled 3.ManyToManyField 四.元信息 五.多对多关联关系的三种方 ...
- Java传输对象模式
当我们想要在客户端到服务器的一个传递具有多个属性的数据时,可使用传输对象模式.传输对象也称为值对象.传输对象是一个具有getter/setter方法的简单POJO类,并且是可序列化的,因此可以通过网络 ...