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>添 ...
随机推荐
- Java出现OutOf MemoryError（OOM 错误)的原因有哪些？出现OOM错误后，怎么解决？
OutOf MemoryError这种错误可以细分为多种不同的错误,每种错误都有自身的原因和解决办法,如下所示: java.lang.OutOfMemoryError: Java heap space ...
- vue生命周期-标注
作者:FlyDragon 出处:http://www.cnblogs.com/fly_dragon/ 关于作者:专注于微软平台项目架构.管理和企业解决方案.如有问题或建议,请多多赐教! 本文版权归作者 ...
- 【原理】RabbitMQ概要图
使用流程 发布者(推送消息的一端): 创建一个tcp长连接connection,连接rabbitmq的监听端口5672: 在TCP长连接下创建一个信道channel,信道可以理解为connection ...
- 2-Harris角点检测
1. 何为角点? 下面有两幅不同视角的图像,通过找出对应的角点进行匹配. 再看下图所示,放大图像的两处角点区域: 我们可以直观的概括下角点所具有的特征: >轮廓之间的交点: >对于同一场景 ...
- 微信小程序学习笔记（一）--创建微信小程序
一.创建小程序 1.申请帐号.安装及创建小程序,请参照官方文档里面的操作 https://developers.weixin.qq.com/miniprogram/dev/. 小程序在创建的时候会要求 ...
- CF 。E2. Stars Drawing (Hard Edition) （DP）
Description: 定义一个星星由 '*' 组成,形状为一个对称的“十”字型,大小为星星 1/2 的横长(或纵长)减一(如题目中的图).给出一个 n*m 的图,判断是不是每一个 '*' 都能属于 ...
- 关于iframe定位碰到的问题。
这几天在做自动化测试的时候发现一个问题,用JQUERY定位时,总是报错,MES:JQUERY IS NOT DEFINED. 检查自己定位没有问题,后来想是不是语法出了问题. 切换成XPATH来定位, ...
- STM32库中自定义的数据类型
在头文件 <stdint.h> 中 1 /* exact-width signed integer types */ typedef signed char int8_t; typedef ...
- SPOJ VFMUL - Very Fast Multiplication (FFT)
题目链接:VFMUL - Very Fast Multiplication Description Multiply the given numbers. Input n [the number of ...
- LeetCode 分隔链表
题目链接:https://leetcode-cn.com/problems/partition-list/ 题目大意 略. 分析 空间复杂度 O(1) 的做法蛮有意思的,另外加头结点可以少写很多代码. ...