追加节点

<!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追加节点的更多相关文章

  1. 前端之javascript的节点操作和Event

    一 节点的增删改查 创建节点:createElement(标签名):创建一个指定名称的节点. 追加节点: 追加一个子节点:somenode.appendChild(标签名) 指定某个位置前面添加一个节 ...

  2. javascript判断节点是否在dom

    在项目中碰到同事写的一段代码: //焦点必须在实时dom树中 if (ele && typeof this.document.contains === "function&q ...

  3. javascript创建节点的事件绑定

    javascript创建节点的事件绑定 timeupdate事件是<video>中用来返回视频播放进度的事件,绑定在<video>标签返回视频播放位置(每秒计). 现video ...

  4. javascript div元素后追加节点

    例子解释: 这段代码创建新的 <p> 元素: var para=document.createElement("p"); 如需向 <p> 元素添加文本,您必 ...

  5. JavaScript DOM节点和文档类型

    以下的例子以此HTML文档结构为例: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  6. 【转】JavaScript获取节点类型、节点名称和节点值

    DOM节点信息包括节点类型(nodeType).节点名称(nodeName)和节点值(nodeValue). 节点类型 DOM节点中,每个节点都拥有不同的类型.W3C规范中常用的 DOM节点类型有以下 ...

  7. javascript DOM 节点 第18节

    <html> <head> <title>DOM对象</title> </head><body><div >DOM对 ...

  8. JavaScript DOM节点操作总结

    节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...

  9. JavaScript之节点的创建、替换、删除、插入

    1.节点的创建 节点的创建使用document.creatElment();文本节点的创建使用document.creatTextNode();如想把<li>哈密瓜</li>添 ...

随机推荐

  1. DLL 本地定义符号*****在函数****中导入

    把_DLL_ELOGEVENT  定义到你的工程预编译宏中 IPCLASSDLL_DLL https://bbs.csdn.net/topics/300140279

  2. Django之ModelForm操作

    一.ModelForm的使用 顾名思义,ModelForm就是将Model与Form进行绑定,Form有自动生成表单的作用,但是每一个forms字段需要自己手动填写,而Model就是数据库表包含了所有 ...

  3. 3、Python 基础类型 -- List 列表类型

    2.更新列表:list.append() 3.删除列表元素 del 

  4. python爬虫学习（3）：使用User-Agent和代理ip

    使用User-Agent方法一,先建立head,作为参数传进去 import urllib.requestimport json content=input("请输入需要翻译的内容:&quo ...

  5. 防火墙---CentOS

    1.查看防火墙状态 firewall-cmd --state 2.停止防火墙 systemctl stop firewalld.service 3.禁止开机启动防火墙 systemctl disabl ...

  6. Delphi获取指定文件的版本号

    获取指定文件的版本号 方式一: function GetFileVersion(FileName: string): string; type PVerInfo = ^TVS_FIXEDFILEINF ...

  7. 中位数+暴力——cf433C

    /* 中位数到所有数的距离之和最小 因为只能改一个数,所以我们找一个数,将其改为和其相邻的数的中位数,使答案最小 先求一次原答案 把每个数相邻的数用vector存下来,然后排序找中位数,计算减小的量 ...

  8. RF中滚动条的操作方法小结

    滚动条分为俩种,一:主页面中的滚动条.二:页面中的子页面的滚动条. 每种滚动条有都分为上下滑动与左右滑动. 下面分别介绍: 一:主页面的滚动条上下滑动: execute javascript      ...

  9. (1)sqlserver2017安装

    本体 https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 图形管理工具ssm 文档 https://docs.microso ...

  10. 树莓派安装raspbian

    需要准备 Win32DiskImager-v0.6 2016-09-23-raspbian-jessie.img 右键管理员打开Win32DiskImager 选择上面的img文件,选择存储卡盘符,点 ...