DOM节点删除函数removeChild()用法实例
本文实例讲述了DOM节点删除函数removeChild()用法。分享给大家供大家参考。具体分析如下:
DOM删除一个节点,必须要站在父节点的高度去删除,代码如下:
<html>
<head>
<script type="text/javascript">
function t(){
//思路:1.首先找到要删除的节点;2. 找到它的父节点,在父节点的角度删除子节点
var nodeul = document.getElementsByTagName('ul')[0];//找到父节点
var li_lan = nodeul.children[2];//找到要删除的子节点
nodeul.removeChild(li_lan);//使用removeChild()函数删除
}
</script>
</head>
<body>
<div id="container">
<ul>
<li>春天</li>
<li>夏天</li>
<li>蓝天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
</div>
<div id="copyul">
</div>
<hr />
<button onclick="t()" value="">删除一个子节点</button>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
JS构建页面的DOM节点结构的实现代码
小提示: 关于数组的concat和push方法. 两者的区别主要有: concat是连接数组,不会修改原数组,返回值为连接后的数组,与push的重要区别是concat会展开数组的第一层子数组 push是添加数组元素.就地修改原数组,返回值为添加的新项,push不会展开传入的数组. 复制代码 代码如下: var a = [1,2,3,4]; var b = [4,5,6,7]; var c = a.push(b); var d = a.concat(b); console.log('a',a);
-
DOM节点的替换或修改函数replaceChild()用法实例
本文实例讲述了DOM节点的替换或修改函数replaceChild()用法.分享给大家供大家参考.具体分析如下: DOM节点的替换过程: (1)创建新的节点: (2)找到旧的节点: (3)站在父节点的角度,使用replaceChild(新,旧)函数来替换. 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){ //思路:1.首先找到要替换的节点:2. 创建一个新的
-
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
复制代码 代码如下: <?php /* <?xml version="1.0" encoding="utf-8"?> <article> <item> <title name="t1"></title> <content>content1</content> <pubdate>2009-10-11</pubdate> </ite
-
js和jquery对dom节点的操作(创建/追加)
复制代码 代码如下: <script src="jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#Button1').click(function () { // var ha = '<p>a</p>'; // $('div').app
-
jQuery的DOM操作之删除节点示例
如果文档中某一个元素多余,那么应将其删除.jQuery提供了两种删除节点的方法,remove()方法和empty()方法. 1. remove(): <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content=&quo
-
JavaScript DOM节点添加示例
<!DOCTYPE html> <html> <body> <div id="div1"> <p id="p1">这是一个段落.</p> <p id="p2">这是另一个段落.</p> </div> <script> var para=document.createElement("h1"); var nod
-
html dom节点操作(获取/修改/添加或删除)
HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.在 HTML DOM 中,所有事物都是节点.DOM 是被视为节点树的 HTML. 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 HTML DOM 将 HTML 文档视作树结构.这种结构被称为节点树: HTML DOM Tree 实例 http://www
-
DOM节点深度克隆函数cloneNode()用法实例
本文实例讲述了DOM节点深度克隆函数cloneNode()用法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){ var nodeul = document.getElementsByTagName('ul')[0];//获取需要复制的UL节点 var newul = nodeul.cloneNode(true)
-
javascript 获取HTML DOM父、子、临近节点
在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同i
-
javascript dom操作之cloneNode文本节点克隆使用技巧
true:完全的复制一个节点,什么叫完全呢,就是复制一切,包括他的子节点,以至于文本节点,凡是有的,一律克隆,所谓完全 false:只克隆当前节点,不克隆任何的子节点,当然也不会克隆他所包裹的文本,因为任何文本都有指向他的节点(文本节点) 当然有时候两者是可以通用的哦,如果要复制的节点没有任何的子节点,这是二者全等:比如 img... 为了让大家理解的更为深刻,举个小例子吧: 复制代码 代码如下: <div> <span>Shadow</span> |No Shadow
-
javascript获取dom的下一个节点方法
利用javascript 写一个在页面点击加减按钮实现数字的累加. 简略的html大概如此.看得懂就好不要在意这些细节啊 <input type="button" value="+" onclick="jia(this)" /> <label class="num">0</label> <input type="button" value="-"
随机推荐
- php实现的中秋博饼游戏之绘制骰子图案功能示例
- Linux内核漏洞浅析
- PHP array_multisort()函数的使用札记
- 用javascript实现在小方框中浏览大图的代码
- C# LINQ to XML应用介绍
- MySQL命令行导出与导入数据库
- bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
- js的逻辑运算符 ||
- 让人印象深刻的10个jQuery手风琴效果应用
- shell脚本学习指南[三](Arnold Robbins & Nelson H.F. Beebe著)
- 灰鸽子服务端卸载程序即灰鸽子官方专杀工具 下载
- 详解CentOS 6.4下PXE+Kickstart无人值守安装操作系统
- Mysql中 show table status 获取表信息的方法
- yii2使用GridView实现数据全选及批量删除按钮示例
- 使用jQuery获得内容以及内容的属性
- 使用js获取地址栏中传递的值
- 心扬JS分页函数代码
- google(gg)广告的西联快汇收取全步骤[图文]
- c# 删除所有的空文件夹的小例子
- Java中对List集合的常用操作详解