删除节点与插入节点 & innerHTML
1.测试removeChild()方法： 删除节点
dom9.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title> <script type="text/javascript">
//测试removeChild()方法： 删除节点
window.onload = function() {
/* alert("1");
var bjNode = document.getElementById("bj");
bjNode.parentNode.removeChild(bjNode); */
//为每个li添加一个confirm(确认对话框)：确定删除xx的信息吗，确定,则删除
// var falg = confirm("确定要删除吗?");
// alert(flag); var liNodes = document.getElementsByTagName("li");
for (var i = 0; i < liNodes.length; i++) {
liNodes[i].onclick = function(){
var flag = confirm("确定要删除"+this.firstChild.nodeValue+"的信息吗？");
if (flag) {
this.parentNode.removeChild(this);
}
}
}
}
</script> </head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul> <br>
<br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul> <br>
<br> name：
<input type="text" name="username" id="name" value="xiaoxiaolin">
</body>
</html>
2.练习
ex5.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"> /*
* 为 #employeetable 的所有的 a 节点添加 Onclick 响应函数:
* 1. 弹出确认对话框: 确定要删除 xx 的信息吗? xx 为当前 a 节点所在的 td 所在的 tr 的
* 第一个 td 子节点的文本值, 且要去除前后空格.
* 2. 若点击 "确认" , 则删除 a 节点的所在的 行
*
* 注意:
* 1. a 节点是一个超级链接, 可以在其 onclick 事件中通过返回 false, 来取消默认行为
* 2. tr 的直接父节点为 tbody, 而不是 table
* 3. 可以把去除前后空格的代码写成一个 trim(str) 函数.
*
* 为 #addEmpButton 添加 onclick 响应函数:
* 1. 获取 #name, #email, #salary 的文本框的值
* 2. 利用 1 获取的文本值创建 3 个 td 节点, 在创建一个 tr 节点. 并把以上的 3 个 td
* 节点价位 tr 节点的子节点
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
</tr>
* 3. 在创建一个 td 节点: <td><a href="deleteEmp?id=xxx">Delete</a></td>
* 4. 把 3 创建的 td 也加为 tr 的子节点.
* 5. 再把 tr 加为 #employeetable 的 tbody 子节点的子节点.
* 6. 为新创建的 tr 的 a 子节点添加 Onclick 响应函数, 使其也具备删除的功能.
*
*/ window.onload = function(){ function removeTr(aNoe){
var trNode = aNoe.parentNode.parentNode;
var textContent = trNode.getElementsByTagName("td")[0]
.firstChild.nodeValue;
textContent = trim(textContent);
var flag = confirm("确定要删除" + textContent + "的信息吗?");
if(flag){
trNode.parentNode.removeChild(trNode);
}
return false;
}
var aNodes = document.getElementById("employeetable")
.getElementsByTagName("a");
for(var i = 0; i < aNodes.length; i++){
aNodes[i].onclick = function(){
removeTr(this);
return false;
}
} document.getElementById("addEmpButton").onclick = function(){ var nameVal = document.getElementById("name").value;
var emailVal = document.getElementById("email").value;
var salaryVal = document.getElementById("salary").value; var nameTd = document.createElement("td");
nameTd.appendChild(document.createTextNode(nameVal)); var emailTd = document.createElement("td");
emailTd.appendChild(document.createTextNode(emailVal)); var salaryTd = document.createElement("td");
salaryTd.appendChild(document.createTextNode(salaryVal)); var tr = document.createElement("tr"); tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd); alert("aa"); //<td><a href="deleteEmp?id=xxx">Delete</a></td>
var aNode = document.createElement("a");
aNode.href = "deleteEmp?id=xxx";
aNode.appendChild(document.createTextNode("Delete"));
var aTd = document.createElement("td");
aTd.appendChild(aNode); tr.appendChild(aTd); aNode.onclick = function(){
removeTr(this);
return false;
} document.getElementById("employeetable")
.getElementsByTagName("tbody")[0]
.appendChild(tr); //value: 用于获取 html 表单元素的值
//alert(this.value); //
//nodeValue: 用于获取文本节点的文本值.
//alert(this.nodeValue); //null } function trim(str){
var reg = /^\s*|\s*$/g;
return str.replace(reg, "");
} } </script>
</head>
<body> <center>
<br> <br> 添加新员工 <br> <br> name: <input type="text"
name="name" id="name" /> email: <input type="text"
name="email" id="email" /> salary: <input type="text"
name="salary" id="salary" /> <br> <br>
<button id="addEmpButton" value="abc">Submit</button>
<br> <br>
<hr>
<br> <br>
<table id="employeetable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>
Jerry
</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</tbody>
</table>
</center> </body>
</html>
3 插入节点:
① insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面.
节点 targetNode 必须是 element 元素的一个子节点。
②自定义 insertAfter() 方法
demo10.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title> <script type="text/javascript"> //测试 insertBefore() 插入节点
//该方法除了进行插入外, 还有移动节点的功能.
window.onload = function(){ alert("abc"); //1. 把 #rl 插入到 #bj 节点的前面 var cityNode = document.getElementById("city");
var bjNode = document.getElementById("bj");
var rlNode = document.getElementById("rl"); //cityNode.insertBefore(rlNode, bjNode); //var refNode = document.getElementById("se");
var refNode = document.getElementById("dj");
insertAfter(rlNode, refNode);
} //把 newNode 插入到 refNode 的后面
function insertAfter(newNode, refNode){
//1. 测试 refNode 是否为其父节点的最后一个子节点
var parentNode = refNode.parentNode;
if(parentNode){
var lastNode = parentNode.lastChild; //2. 若是: 直接把 newNode 插入为 refNode 父节点的最后一个子节点.
if(refNode == lastNode){
parentNode.appendChild(newNode);
}
//3. 若不是: 获取 refNode 的下一个兄弟节点, 然后插入到其下一个兄弟
//节点的前面.
else{
var nextNode = refNode.nextSibling;
parentNode.insertBefore(newNode, nextNode);
}
}
} </script> </head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li id="dj">东京</li>
<li id="se">首尔</li>
</ul> <br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul> <br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female <br><br>
name: <input type="text" name="username" value="atguigu"/> </body>
</html>
4.innerHTML属性:
浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分.
innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容
<script type="text/javascript">
//测试 innerHTML 属性
window.onload = function(){
var cityNode = document.getElementById("city");
alert(cityNode.innerHTML);
//互换 #city 节点和 #game 节点中的内容.
var tempHTML = cityNode.innerHTML;
var gameNode = document.getElementById("game");
cityNode.innerHTML = gameNode.innerHTML;
gameNode.innerHTML = tempHTML;
}
</script>
删除节点与插入节点 & innerHTML的更多相关文章
- jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法
jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容 ,html() - 设置或返回所 ...
- JQuery_DOM 节点操作之创建节点、插入节点
一.创建节点 为了使页面更加智能化,有时我们想动态的在html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点 <script type="text/javasc ...
- JQ 添加节点和插入节点的方法总结
转载来源:http://blog.csdn.net/ss1106404013/article/details/49274345 添加节点的jQuery方法: append().prepend().ap ...
- C语言实现双向链表删除节点、插入节点、双向输出等操作
#include<cstdio> #include<cstdlib> typedef struct DoubleLinkedList { int data; struct Do ...
- [javaSE] 数据结构（二叉查找树-插入节点）
二叉查找树(Binary Search Tree),又被称为二叉搜索树,它是特殊的二叉树,左子树的节点值小于右子树的节点值. 定义二叉查找树 定义二叉树BSTree,它保护了二叉树的根节点BSTNod ...
- 插入节点insertBefore()
http://www.imooc.com/code/1699 插入节点insertBefore() insertBefore() 方法可在已有的子节点前插入一个新的子节点. 语法: insertBef ...
- Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作
一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
- C#中操作xml文件（插入节点、修改、删除）
已知有一个xml文件(bookstore.xml)如下: <?xml version="1.0" encoding="gb2312"?> <b ...
- jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作
一．创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...
随机推荐
- uiautomatorviewer 出现安卓8.0级以上无法打开的解决方法
一..本人在使用Android自带的uiautomatorviewer工具来进行app元素定位时,出现了Android 9.0打开不了.出现了如下图错误提示: 经过网上的查阅,总结了几个解决的方法. ...
- 【MIT6.828】centos7下使用Qemu搭建xv6运行环境
title:[MIT6.828]centos7下使用Qemu搭建xv6运行环境 date: "2020-05-05" [MIT6.828]centos7下搭建xv6运行环境 1. ...
- Tarjan缩点割点(模板)
描述:https://www.luogu.com.cn/problem/P3387 给定一个 nn 个点 mm 条边有向图,每个点有一个权值,求一条路径,使路径经过的点权值之和最大.你只需要求出这个权 ...
- SpringBoot：整合Shiro
目录 1.Shiro简介 1.1.什么是Shiro? 1.2.有哪些功能 1.3.Shiro架构(外部) 1.4.Shiro架构(内部) 2.HelloWorld 3.Shiro整合Spring Bo ...
- 常用中文分词工具分词&词性标注简单应用（jieba、pyhanlp、pkuseg、foolnltk、thulac、snownlp、nlpir）
1.jieba分词&词性标注 import jieba import jieba.posseg as posseg txt1 =''' 文本一: 人民网华盛顿3月28日电(记者郑琪)据美国约翰 ...
- 实现简单网页rtmp直播：nginx+ckplayer+linux
一.安装nginx 安装带有rtmp模块的nginx服务器(其它支持rtmp协议的流媒体服务器像easydarwin.srs等+Apache等web服务器也可以),此处使用nginx服务器,简单方便. ...
- MySQL 入门（4）：锁
摘要 在这篇文章中,我将从上一篇的一个小例子开始,跟你介绍一下InnoDB中的行锁. 在这里,会涉及到一个概念:两阶段加锁协议. 之后,我会介绍行锁中的S锁和X锁,以及这两种锁的作用. 但是我们会发现 ...
- 设计模式GOF23大纲
创建型模式: 单例模式,工厂模式,抽象工厂模式 结构型模式: 适配器模式,桥接模式,装饰模式,组合模式,外观模式,享元模式,代理模式 行为型模式: 模板方法模式,命令模式,迭代器模式,观察者模式,中介 ...
- [hdu5360]贪心
题意:一个人想邀请n个人出去玩,假设当前同意和他一起去的人数为cnt,那么他去邀请i的时候,i同意的条件是L[i]<=cnt<=R[i],L[i],R[i]是给定的,问怎样安排邀请顺序,使 ...
- [hdu4585]离线，并查集
题意:把一些数加到集合里面,每个数有两个属性,分别是编号和值,加进去之前询问集合里面距离自己“最近”的数的编号.最近的意思是值的差的绝对值最小,如果有相等的,则取值小的.并且已知所有数的id和valu ...