DOM增删改
<!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>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript"> window.onload = function() { //创建一个"广州"节点,添加到#city下
myClick("btn01",function(){
//创建广州节点 <li>广州</li>
//创建li元素节点
/*
* document.createElement()
* 可以用于创建一个元素节点对象，
* 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
* 并将创建好的对象作为返回值返回
*/
var li = document.createElement("li"); //创建广州文本节点
/*
* document.createTextNode()
* 可以用来创建一个文本节点对象
* 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
*/
var gzText = document.createTextNode("广州"); //将gzText设置li的子节点
/*
* appendChild()
* - 向一个父节点中添加一个新的子节点
* - 用法：父节点.appendChild(子节点);
*/
li.appendChild(gzText); //获取id为city的节点
var city = document.getElementById("city"); //将广州添加到city下
city.appendChild(li); }); //将"广州"节点插入到#bj前面
myClick("btn02",function(){
//创建一个广州
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText); //获取id为bj的节点
var bj = document.getElementById("bj"); //获取city
var city = document.getElementById("city"); /*
* insertBefore()
* - 可以在指定的子节点前插入新的子节点
* - 语法：
* 父节点.insertBefore(新节点,旧节点);
*/
city.insertBefore(li , bj); }); //使用"广州"节点替换#bj节点
myClick("btn03",function(){
//创建一个广州
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText); //获取id为bj的节点
var bj = document.getElementById("bj"); //获取city
var city = document.getElementById("city"); /*
* replaceChild()
* - 可以使用指定的子节点替换已有的子节点
* - 语法：父节点.replaceChild(新节点,旧节点);
*/
city.replaceChild(li , bj); }); //删除#bj节点
myClick("btn04",function(){
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city"); /*
* removeChild()
* - 可以删除一个子节点
* - 语法：父节点.removeChild(子节点);
*
* 子节点.parentNode.removeChild(子节点);
*/
//city.removeChild(bj); bj.parentNode.removeChild(bj);
}); //读取#city内的HTML代码
myClick("btn05",function(){
//获取city
var city = document.getElementById("city"); alert(city.innerHTML);
}); //设置#bj内的HTML代码
myClick("btn06" , function(){
//获取bj
var bj = document.getElementById("bj");
bj.innerHTML = "昌平";
}); myClick("btn07",function(){ //向city中添加广州
var city = document.getElementById("city"); /*
* 使用innerHTML也可以完成DOM的增删改的相关操作
* 一般我们会两种方式结合使用
*/
//city.innerHTML += "<li>广州</li>"; //创建一个li
var li = document.createElement("li");
//向li中设置文本
li.innerHTML = "广州";
//将li添加到city中
city.appendChild(li); }); }; function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
} </script> </head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p> <ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul> </div>
</div>
<div id="btnList">
<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
<div><button id="btn04">删除#bj节点</button></div>
<div><button id="btn05">读取#city内的HTML代码</button></div>
<div><button id="btn06">设置#bj内的HTML代码</button></div>
<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
</div>
</body>
</html>
DOM增删改的更多相关文章
- JavaScript HTML DOM增删改查
首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 主要记录如何对HTML元素进行增删改查. 1 查找DOM 第一种方式是我们最常用的 ...
- DOM增删改替换
一.在创建元素的时候为什么要把创建元素到也页面写到后面? 要求:创建一个div,在div中创建10个span. var div = document.createElement("div ...
- DOM增删改操作
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 使用dom元素和jquery元素实现简单增删改的练习
软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquer ...
- 使用DOM进行xml文档的crud（增删改查）操作<操作详解>
很多朋友对DOM有感冒,这里我花了一些时间写了一个小小的教程,这个能看懂,会操作了,我相信基于DOM的其它API(如JDOM,DOM4J等)一般不会有什么问题. 后附java代码,也可以下载(可点击这 ...
- 第 9 章 DOM 的增删改查
DOM 的增删改查 本文不会详细讲解,只是简单提及知识要点,详细可以参考<dom高级编程>. 1. document.write document.write('<h1>创建节 ...
- js中script的上下放置区别 ， Dom的增删改创建
回顾 javascript分为三部分: 1.ECMAScript5.0 es6(阮一峰) es7 es8 es6中有类的概念 声明变量 var let(es6中语法) 内置函数 Date Math.r ...
- DOM节点的增删改查
在开始展开DOM操作前,首先需要构建一棵DOM树. <!DOCTYPE html> <html lang="en"> <head> <me ...
- HTML DOM(二)：节点的增删改查
上一篇讲述了DOM的基本知识,从其得知,在DOM眼中,HTML的每个成分都可以看作是节点(文档节点.元素节点.文本节点.属性节点.注释节点,其中,属性节点是属于元素节点),本篇的内容就是通过DOM对这 ...
随机推荐
- XOR and Favorite Number CodeForces - 617E
a[i]^a[i+1]--a[j]=k; 处理前缀和pre[i] 那么上式可以表示为pre[i-1]^pre[j]=k; #include<bits/stdc++.h> using nam ...
- 如何实现广告响应式滚动 OwlCarousel2
githu https://github.com/OwlCarousel2/OwlCarousel2 OwlCarousel2 官方网址 http://owlcarousel2.githu ...
- spark 报错 InvalidClassException: no valid constructor
2019-03-19 02:50:24 WARN TaskSetManager:66 - Lost task 1.0 in stage 0.0 (TID 1, 1.2.3.4, executor 1) ...
- 使用vscode阅读C代码outline不显示问题
1 问题:使用vscode code 阅读C代码 outline 显示No symbols found in document 'xxxx' 2 参考网上解决方法,进行如下操作 2.1 安装C/C+ ...
- eclipse一直不停building workplace
找解决方案的时候自己好了 然后又卡在了updating maven project 暂无解
- 2.Python函数/方法(method/function)详解
1.什么是函数 它是一段功能代码,理解为一种功能行为,在内存中有空间区域,函数需要被调用才能执行(通过函数名来调用): 好处: 1).提高代码的复用性 2).提升代码的阅读性 3).增加代码的扩展性 ...
- WebDev.WebServer20.exe应用程序错误
我的.net网页,在iis运行成功,在VS2010调试网页时报一个WebDev.WebServer20.exe应用程序错误. 最后查找资料,发现了网站设置的框架是2.0,在vs2010里不能调试2.0 ...
- STL-map/multimap 简述
#include <iostream> #include <cstdio> #include <map> using namespace std; int main ...
- nodejs events
EventEmitter类 events模块提供一个对象:events.EventEmitter,核心是事件触发和事件监听的封装. 大多数时候不会直接使用EventEmitter,而是在对象中继承它( ...
- web端常见测试
一.登录注册功能 1.页面调转 2.tab键与enter键 3.密码加密显示,是否支持复制粘贴 4.账号密码校验 5.刷新页面,更新验证码 二.界面测试 1.样式.颜色.整体布局风格 2.最大化.最小 ...