javaEE004.02 DOM增删改（append、appendTo、prepend、prependTo、after、before、insertAfter、replace、empty、remove）

最新推荐文章于 2021-10-26 11:07:30 发布
最新推荐文章于 2021-10-26 11:07:30 发布
阅读量249 收藏
点赞数
文章标签： JavaScript DOM DOM增删改
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41753340/article/details/110477780
版权

系列文章目录

文章目录

一、代码模板

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM增删改</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			/*
				DOM操作，增删改
					增
						内后
							append()
							appendTo()
						内前
							prepend()
							prependTo()
						外后
							after()
						外前
							before()
					删
						empty():掏空
						remove():删除
					改
						replaceWith()
			*/
			$(function(){
				var $li = $("<li>广州</li>");
				
				$("#btn01").click(function(){
					//在#city中添加广州节点 [append()]
					$("#city").prepend($li);
// 					$li.appendTo($("#city"));
// 					$("#city").append($li);
				});
				
				$("#btn02").click(function(){
					//创建一个"广州"节点,添加到#city下[appendTo()]
					
				});
				
				$("#btn03").click(function(){
					//在#city中添加广州节点[prepend()]
				});
				
				$("#btn04").click(function(){
					//创建一个"广州"节点,添加到#city下[prependTo()]
					
				});
				
				
				$("#btn05").click(function(){
					//在#bj前面插入"广州"节点[before()]
					$li.insertBefore($("#bj"));
// 					$("#bj").before($li);
// 					$("#bj").after($li);
				});
				
				$("#btn06").click(function(){
					//将"广州"节点插入到#bj前面[insertBefore()]
					
				});
				
				$("#btn07").click(function(){
					//在#bj后面插入"广州"节点[after()]
					
				});
				
				$("#btn08").click(function(){
					//将"广州"节点插入到#bj后面[insertAfter()]
					
				});
				
				$("#btn09").click(function(){
					//使用"广州"节点替换#bj节点[replaceWith()]
					$li.replaceAll($("#bj"));
// 					$("#bj").replaceWith($li);
				});
				
				$("#btn10").click(function(){
					//使用"广州"节点替换#bj节点[replaceAll()]
					
				});
				
				$("#btn11").click(function(){
					//删除#rl节点[remove()]
					$("#rl").empty();
// 					$("#rl").remove();
				});
				
				$("#btn12").click(function(){
					//掏空#city节点[empty()]
					
				});
				
				$("#btn13").click(function(){
					//读取#city内的HTML代码
					var htmlText = $("#city").html();
					alert(htmlText);
				});
				
				$("#btn14").click(function(){
					//设置#bj内的HTML代码
					$("#bj").html("abcde");
					/*
						innerHTML	html()		<div>dsf</div><p>sdf</p>
						innerText	text()
						value		val()		<input value="" />
					*/
				});
				
			});
			
		
		</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>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input type="radio" name="gender" value="male"/>
				Male
				<input type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">在#city中添加广州节点[append()]</button></div>
			<div><button id="btn02">创建一个"广州"节点,添加到#city下[appendTo()]</button></div>
			<div><button id="btn03">创建一个"广州"节点,添加到#city下[prepend()]</button></div>
			<div><button id="btn04">创建一个"广州"节点,添加到#city下[prependTo()]</button></div>
			<div><button id="btn05">在#bj前面插入"广州"节点[before()]</button></div>
			<div><button id="btn06">将"广州"节点插入到#bj前面[insertBefore()]</button></div>
			<div><button id="btn07">在#bj后面插入"广州"节点[after()]</button></div>
			<div><button id="btn08">将"广州"节点插入到#bj后面[insertAfter()]</button></div>
			<div><button id="btn09">使用"广州"节点替换#bj节点[replaceWith()]</button></div>
			<div><button id="btn10">使用"广州"节点替换#bj节点[replaceAll()]</button></div>
			<div><button id="btn11">删除#rl节点[remove()]</button></div>
			<div><button id="btn12">掏空#city节点[empty()]</button></div>
			<div><button id="btn13">读取#city内的HTML代码</button></div>
			<div><button id="btn14">设置#bj内的HTML代码</button></div>
		</div>
	</body>
</html>

css：

@CHARSET "UTF-8";
#total{
	width: 450px;
}

ul{
	list-style-type: none;
}

li{
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float:left;
}

.inner{
	width:400px;
	border-style: solid;
	border-width: 1px;
	margin: 10px;
	padding: 10px;
	float: left;
}

复制上面的代码，就可以开始学习了

二、DOM增删改

在这里插入图片描述
在这里插入图片描述

1、在#city中添加广州节点[append()]
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
所以删除 remove 更常用一些，因为删除更彻底，一般删除掉这个元素了，那么这个事件也没啥用了

在这里插入图片描述
2、创建一个"广州"节点,添加到#city下[appendTo()]
第2题跟第1题差不多 ，append改成 appendTo需要注意的是如下
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
思路：找到东京之后，插入到外部

3、创建一个"广州"节点,添加到#city下[prepend()]

4、创建一个"广州"节点,添加到#city下[prependTo()]

5、在#bj前面插入"广州"节点[before()]
在这里插入图片描述

在这里插入图片描述

6、将"广州"节点插入到#bj前面[insertBefore()]
7、在#bj后面插入"广州"节点[after()]
8、将"广州"节点插入到#bj后面[insertAfter()]
9、使用"广州"节点替换#bj节点[replaceWith()]
在这里插入图片描述
在这里插入图片描述
10、使用"广州"节点替换#bj节点[replaceAll()]
11、删除#rl节点[remove()]
12、掏空#city节点[empty()]
在这里插入图片描述

13、读取#city内的HTML代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

14、设置#bj内的HTML代码

在这里插入图片描述

总结

在这里插入图片描述

在这里插入图片描述
根据文档，一个一个去看即可，多练习，多写自然就会了

EP小良_007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中的dom查询、增删改
yuanmomoya的博客
08-29 293
jQuery中的dom查询、增删改 dom查询（例子中体现） eq()选择索引值为等于 3 的 div 元素 first()选择第一个 div 元素 filter()在div中选择索引为偶数的 has()选择div中包含.mini的 children()在body中选择所有class为one的div子元素 find()在body中选择所有class为mini的div后代元素 ne...
XML用VS2005 编写的DOM.(append.insert.replace.remove)
liaozhiweihaifeng的专栏
06-17 581
using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.W
java appendto方法_JQuery中html、append、appendTo、after、insertAfter系列方法
weixin_36373860的博客
02-28 323
html方法，给元素添加html代码或者清空html代码(参数为空字符串)；append向元素的末尾添加html代码；appendTo这个方法跟append方法的很像，只是要添加的html代码的目标有所不一样；after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入；before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，...
java appendto方法_jQuery中appendTo()方法用法实例
weixin_39662611的博客
02-28 138
本文实例讲述了jQuery中appendTo()方法用法。分享给大家供大家参考。具体分析如下：此方法把匹配的元素插入指定元素结尾，插入位置在元素的内部。appendTo()方法的作用和append()方法是相同的，但是语法是不同的，尽管形式一样。语法结构:$(selector).appendTo(content)参数列表:参数描述selector要被插入的匹配元素。content要被插入匹配元素的...
java appendto方法_jquery中append()与appendto()用法分析
weixin_33040687的博客
02-28 520
本文实例分析了jquery中append()与appendto()的用法。分享给大家供大家参考。具体分析如下：在jQuery的文档操作方法中，append()和appentto()方法执行的任务相同，但是两者也有区别。1、append()方法：在被选元素的结尾(但仍在元素内部)插入指定的内容。a、语法：$(selector).append(content);其中，参数content是必需的，指定要...
Rich examples of JavaEE..zip
最新发布
12-29
这个"Rich examples of JavaEE..zip"压缩包很可能包含了丰富的JavaEE实战示例，帮助开发者深入理解并掌握JavaEE的各项技术。JavaEE平台由一系列的API和服务组成，旨在简化企业级应用程序的开发，提供诸如数据库连接...
JavaEE技术-自主学习.zip_hibernate_hibernate session _javaee映射.xml
09-15
JavaEE技术是企业级应用程序开发的重要框架，而Hibernate作为其中的一员，是用于简化Java与数据库交互的ORM（对象关系映射）工具。本教程聚焦于使用Hibernate进行数据操作，并通过XML文件来配置数据库连接和对象-...
admin console project for zookeeper monitor using javaee..zip
12-29
【描述】：“admin console project for zookeeper monitor using javaee..zip” 提供了一个完整的JavaEE应用程序，用于监控Zookeeper集群。这个项目可能包括前端界面，用于展示Zookeeper节点的状态、会话信息、选举...
JAVAEE 项目.zip
12-29
【JAVAEE 项目.zip】是一个包含Java企业版（JAVAEE）开发项目的压缩包，它集成了多种技术，如Servlet、JSP、EJB、JPA、JMS等，用于构建分布式、多层的企业级应用程序。这个项目可能是一个完整的web应用，涵盖了从...
Criando um CRUD simples utilizando JavaEE..zip
12-29
在本项目中，我们将深入探讨如何使用JavaEE创建一个简单的CRUD（Create, Read, Update, Delete）应用程序。JavaEE，全称为Java Platform, Enterprise Edition，是Java平台的一个版本，专为开发企业级应用程序而设计...
java appendto方法_jquery append与appendTo方法比较
weixin_29069575的博客
02-28 126
jquery中append与appendTo方法区别1. append(content)方法方法作用：向每个匹配的元素内部追加内容。参数介绍：content (): 要追加到目标中的内容。用法示例：HTML代码为I come from I love 向所有p标签中追加一个单词china，则写法为 $("p").append("china");结果为：I come from chinaI love...
剑指 Offer 26. 树的子结构
qq_40941016的博客
12-30 60
/** * Definition for a binary tree node. * public class TreeNode { * int val; * TreeNode left; * TreeNode right; * TreeNode(int x) { val = x; } * } */ class Solution { // 看的精选答案，递归调递归，但是整体思路很容易理解。 public boolean isSubStruct.
Jquery复习（五）之append()、appendTo()、prepend()、prependTo()、after()、before()易忘点...
weixin_30750335的博客
07-23 104
添加元素的方法 append()、appendTo()、prepend()、prependTo()、after()、before() 通过 append() 、appendTo()、prepend() 、prependTo()方法添加若干新元素 在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。 不过，append() 和 prepend() 方法能够通过参数接收无...
【jQuery】append()与appendTo()
景谦Nice的博客
11-28 180
append()：向每个匹配元素内部的末尾处插入内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>append()</title> <script src="js/jquery-3.3.1.js"></script&gt...
append() 与appendTo 比较
a520songhai的博客
06-27 4882
1. append(content)方法 方法作用：向每个匹配的元素内部追加内容。 参数介绍：content (&lt;Content&gt;): 要追加到目标中的内容。 用法示例： HTML代码为&lt;p&gt;I come from &lt;/p&gt;&lt;p&gt;I love &lt;/p&gt; 向所有p标签中追加一个单词china，则写法为 $("p").append...
jquery方法之append()与appendto()
知然的专栏
03-15 9956
在jQuery的文档操作方法中，append()和appentto()方法执行的任务相同，但是两者也有区别。 1、append()方法：在被选元素的结尾（但仍在元素内部）插入指定的内容。   a、语法：$(selector).append(content);    其中，参数content是必需的，指定要附加的内容。 b、append能够使用函数给被选元素附加内容，语法为：$(selecto
append() 和appendTo()的区别
热门推荐
懒惰的小妖
01-16 1万+
append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容。 appendTo() 向目标结尾插入匹配元素集合中的每个元素。 1.append() 方法在被选元素的结尾（仍然在内部）插入指定内容。  2.appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。 提示：append() 和 appendTo() 方法执行的任务相...
java在文件末尾添加数据
changli269的专栏
05-24 634
在文件的末尾添加数据： 方法一： public void appendToFile(String str) {      String filename = "d:\\append.txt";       FileOutputStream stream;      OutputStreamWriter writer;      try       {         stream = ne...
【jQuery】Dom操作之增删改查
weixin_48596030的博客
10-26 352
1.创建节点 2.添加内容 3.添加节点 4.删除节点 5.修改/替换
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值