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对这 ...
随机推荐
- DK1.5-JDK11各个新特性
摘要: 参考文献: https://blog.csdn.net/lsxf_xin/article/details/79712537 JDK各个版本的新特性 要了解一门语言,最好的方式就是要能从基础的版 ...
- JS数据类型和堆栈+变量比较和值的复制+参数传递和类型检测
变量命名 变量名:字母 数字 下划线 美元符$ jquery: $ $.each() $ === jQuery underscore( js的一个函数库) : _ _.ea ...
- python数据类型（第一弹）
作为一门计算机编程语言,python与其它语言一样,设有若干种数据类型,准确掌握各种数据类型的常用方法是精通python的必要条件,也是熟练使用各数据类型.最大限度发挥它们功能的基本条件. pytho ...
- vue(六)--计算属性（computed）
计算属性关键词: computed demo1: <div id="app"> <p>原始字符串: {{ message }}</p> < ...
- Selenium实战（一）——浏览器实例
一.Chrome浏览器 首先,在所有的打开浏览器操作之前,要配置好python环境和selenium,安装好如下图所示:然后可以选择一款适合自己的编辑器,这里用的是pycharm(第一次写博客贴的动图 ...
- ls, chgrp, chown, chmod
ls命令 [root@client ~]# ls -la 总用量 dr-xr-x---. root root 2月 : . dr-xr-xr-x. root root 2月 : .. -rwxrwxr ...
- bitset刷题记录
大佬的bitset用法小结 https://www.cnblogs.com/zwfymqz/p/8696631.html BZOJ3687简单题 题意:求子集的算术和的异或和,子集大小为n(n< ...
- LVS负载均衡工作模式和调度算法
原文链接:https://blog.csdn.net/weixin_40470303/article/details/80541639 一.LVS简介 LVS(Linux Virtual Server ...
- 使用ASP.NET Core 3.x 构建 RESTful API - 4.1 面向外部的Model
Entity Framework Core 使用的 Entity Model 是用来表示数据库里面的记录的. 而面向外部的 model 则表示了要传输的东西.这类 model 有时候叫做 Dto,有时 ...
- Candies POJ - 3159 差分约束
// #include<iostream> #include<cstring> #include<queue> #include<stack> #inc ...