DOM操作之CRUD操作

CRUD操作:
       1. append():父元素将子元素追加到末尾
           * 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
       2. prepend():父元素将子元素追加到开头
           * 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
       3. appendTo():
           * 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
       4. prependTo()：
           * 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头

5. after():添加元素到元素后边
           * 对象1.after(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
       6. before():添加元素到元素前边
           * 对象1.before(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系
       7. insertAfter()
           * 对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
       8. insertBefore()
           * 对象1.insertBefore(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系

04-create&append.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>内部插入脚本</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="../js/jquery-3.3.1.min.js"></script><style type="text/css">div,span{width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 30px;height: 30px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div.visible{display:none;}</style><script type="text/javascript">$(function () {// <input type="button" value="将反恐放置到city的后面"  id="b1"/>$("#b1").click(function () {//append//$("#city").append($("#fk"));//appendTo$("#fk").appendTo($("#city"));});// <input type="button" value="将反恐放置到city的最前面"  id="b2"/>$("#b2").click(function () {//prepend//$("#city").prepend($("#fk"));//prependTo$("#fk").prependTo($("#city"));});// <input type="button" value="将反恐插入到天津后面"  id="b3"/>$("#b3").click(function () {//after//$("#tj").after($("#fk"));//insertAfter$("#fk").insertAfter($("#tj"));});// <input type="button" value="将反恐插入到天津前面"  id="b4"/>$("#b4").click(function () {//before//$("#tj").before($("#fk"));//insertBefore$("#fk").insertBefore($("#tj"));});});</script></head><body><input type="button" value="将反恐放置到city的后面"  id="b1"/><input type="button" value="将反恐放置到city的最前面"  id="b2"/><input type="button" value="将反恐插入到天津后面"  id="b3"/><input type="button" value="将反恐插入到天津前面"  id="b4"/><ul id="city"><li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li><li id="cq" name="chongqing">重庆</li></ul><ul id="love"><li id="fk" name="fankong">反恐</li><li id="xj" name="xingji">星际</li></ul><div id="foo1">Hello1</div> </body></html>

9. remove():移除元素
           * 对象.remove():将对象删除掉
       10. empty():清空元素的所有后代元素。
           * 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>删除节点</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="../js/jquery-3.3.1.min.js"></script><script type="text/javascript">$(function () {// <input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>$("#b1").click(function () {$("#bj").remove();});// <input type="button" value="删除city所有的li节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>$("#b2").click(function () {$("#city").empty();});});</script></head><body><input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/><input type="button" value="删除所有的子节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/><ul id="city"><li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li><li id="cq" name="chongqing">重庆</li></ul><p class="hello">Hello</p> how are <p>you?</p> </body>
</html>

DOM操作之CRUD操作相关推荐

用“XML解析开发包Jaxp”对XML文件进行Dom方式的CRUD操作
IT程序员开发必备-各类资源下载清单,史上最全IT资源,个人收藏总结! package edu.jaxp; import java.io.FileNotFoundException; import j ...
memcached高速缓存学习笔记003---利用JAVA程序操作memcached crud操作
memcache的Java客户端调用,在网上还是有些少,很多都是php的.如何要想用Java调用memcache的服务,首先要有客户端的支持,我们先下载一个客户端吧.下载地址:https://gith ...
php 命令执行crud_如何使用原始JavaScript执行CRUD操作
php 命令执行crud by Zafar Saleem 通过Zafar Saleem 如何使用原始JavaScript执行CRUD操作 (How to perform CRUD operations ...
具有分页，排序，搜索和导出数据选项的ASP.NET Core CRUD操作
目录介绍先决条件我使用的技术创建此项目的步骤已安装的Nuget包 MSSQL表脚本在MSSQL数据库中创建MOC数据创建一个模型类数据库连接:appsettings.json Star ...
jaxp 解析xml 小demo 对xml文件标签实现增删改查crud操作
<?xml version="1.0" encoding="utf-8" standalone="no"?><school ...
mybatis CRUD操作
mybatis CRUD操作 select select标签是mybatis最常用的标签之一. select语句有很多属性可以详细的配置每一天sql语句. id 命名空间唯一的标识. 接口中的方法名与 ...
mybatis 一对多_Springboot整合Mybatis实现级联一对多CRUD操作
在关系型数据库中,随处可见表之间的连接,对级联的表进行增删改查也是程序员必备的基础技能.关于Spring Boot整合Mybatis在之前已经详细写过,不熟悉的可以回顾Spring Boot整合Myb ...
vue.js crud_如何使用VS Code和ADO.NET使用ASP.NET Core执行CRUD操作
vue.js crud 介绍 (Introduction) In this article we are going to create a web application using ASP.NET ...
MyBatis学习总结(二)——使用MyBatis对表执行CRUD操作
上一篇博文MyBatis学习总结(一)--MyBatis快速入门中我们讲了如何使用Mybatis查询users表中的数据,算是对MyBatis有一个初步的入门了,今天讲解一下如何使用MyBatis对u ...

DOM操作之CRUD操作

04-create&append.html

DOM操作之CRUD操作相关推荐

最新文章

热门文章