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对这 ...
随机推荐
- kali帮助
kali help Attention 这是我N久前学习kali时自己打的东西,不保证没有纰漏啊…… 网址 kali:https://www.herojd.com/forum.php?mod=view ...
- Eclipse安装WebJavaEE插件、Eclipse编写HTML代码（综合问题统一记录）
1 Eclipse没有Web插件和JavaEE插件咋整 1.1 在Eclipse中菜单help选项中选择install new software选项 1.2 在work with 栏中输入 http: ...
- P2094运输
-------------------- 链接:Miku ------------------- 这是一道水贪心,很容易想到做法就是把最贵的两个放在一块,让后当成一个重新放回队列 ---------- ...
- 五种编程语言解释数据结构与算法——顺序表3（JavaScript与Python语言实现）
7.JavaScript语言实现 7.1.用ES6语法编写顺序表类 //1.创建类 class MyList { //1. initList(&L):初始化表.构造一个空的线性表.放回值应该是 ...
- 面试 Spring Boot 再也不怕了，答案都在这里！
问: 什么是spring boot? 答:多年来,随着新功能的增加,spring变得越来越复杂.只需访问页面https://spring.io/projects,我们将看到所有在应用程序中使用的不同功 ...
- k8s 在Centos上 安装
k8s安装步骤: 1.所有机器上执行以下命令,准备安装环境:(注意是所有机器,主机master,从机node都要安装) 1.1.安装epel-release源(EPEL (Extra Packages ...
- 01、模拟ATM机界面程序
一.概述 设计一个简单的模拟自动取款机ATM界面的程序,实现用户登录及取款等功能. 二.需求分析 (1)模拟自动取款机ATM界面,有常用功能. (2)主要功能包括;用户输入密码登录主界面.取款功能.取 ...
- defender 书荐
2018全年度推荐: 1.[法]大仲马——基督山伯爵 2.[美]加西亚·马尔克斯——百年孤独 3.[法]大仲马——三个火枪手 2019第一季度推荐: 1.霍达——穆斯林的葬礼 2.[苏联]尼·奥斯特洛 ...
- PHP0007：PHP基础-字符串
php设置编码 用gbk编码识别utf8字符
- Anaconda 常用命令
目录 包管理 环境管理 共享环境设置 包管理 安装包 conda install xxx conda install pandas ; conda install pandas numpy ; 同时安 ...