JQuery中html、append、appendTo、after、insertAfter系列方法
2019独角兽企业重金招聘Python工程师标准>>>
- html方法,给元素添加html代码或者清空html代码(参数为空字符串);
- append向元素的末尾添加html代码;
- appendTo这个方法跟append方法的很像,只是要添加的html代码的目标有所不一样;
- after向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素后移,然后将html代码插入;
- before向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前移,然后将html代码插入;
- insertAfter将JQuery封装好的元素插入到指定元素的后面,如果元素后面有元素了,那将后面的元素后移,然后将JQuery对象插入;
- insertBefore将JQuery封装好的元素插入到指定元素的前面,如果元素前面有元素了,那将前面的元素前移,然后将JQuery对象插入;
- empty清空元素内部的html代码,它只是清空内部的html代码,但是标记仍然留在DOM中;
- remove从DOM中移除整个元素;
需要指出的重要的一点:JQuery会自动的完善html代码,也就是说,假如你要执行以下操作
- $('content').append('<p>CSDN');
- $('content').append('<p>CSDN');
那么实际插入到标记中的html代码是
- <p>CSDN</p>
- <p>CSDN</p>
这一点需要特别注意,很多教程之类的只是讲解这些函数的动作,但是会忽略一些细节;
下面让我来详细解释一下每个函数的作用以及它是如何工作的,会产生什么效果。以后的代码我都对这样的一个模板来操作,代码以及效果如下:
- <style type="text/css">
- .box
- {
- width:100px;
- height:100px;
- border:2px solid red;
- padding:10px;
- text-align:center;
- }
- .child
- {
- width:70px;
- height:20px;
- border:2px solid red;
- text-align:center;
- }
- </style>
- <style type="text/css">
- .box
- {
- width:100px;
- height:100px;
- border:2px solid red;
- padding:10px;
- text-align:center;
- }
- .child
- {
- width:70px;
- height:20px;
- border:2px solid red;
- text-align:center;
- }
- </style>
- <div id="top" class="box">
- <span>top</span>
- </div>
- <div id="middle" class="box">
- <span>middle</span>
- </div>
- <div id="bottom" class="box">
- <span>bottom</span>
- </div>
- <div id="top" class="box">
- <span>top</span>
- </div>
- <div id="middle" class="box">
- <span>middle</span>
- </div>
- <div id="bottom" class="box">
- <span>bottom</span>
- </div>
原始的效果图:
一、html函数的使用
我们执行以下语句:
- $('#middle').html('<div class="child">html()');
- $('#middle').html('<div class="child">html()');
效果图如下:
再来看看最终的代码:
这里是完整的html代码,也就是说JQuery为我们补全了代码,这一点需要注意,JQuery为我们带来了方便,但是当我们需要精确控制html代码的时候,需要注意一点。
html函数的作用原理首先是移除目标元素内部的html代码,然后将新代码添加到目标元素。
二、append、appendTo函数的使用
执行以下语句:
- $('#middle').append('<div class="child">append()</div>');
- $('#middle').append('<div class="child">append()</div>');
注:为了编程规范,html代码我之后都使用完整的html标记。
效果图如下:
最终的代码:
append函数将html附加到了<span>middle</span>之后。
appendTo函数的效果和append一样,只不过是写法不一样:
- $('<div class="child">append()</div>').appendTo('#middle');
- $('<div class="child">append()</div>').appendTo('#middle');
appendTo首先将html代码封装成jquery对象,然后添加到指定的目标位置。
三、after、insertAfter函数的使用
执行以下语句:
- $('#middle').after('<div class="child">after()</div>');
- $('#middle').after('<div class="child">after()</div>');
效果图:
after函数的作用是将html代码插入指定元素的后面,如果后面有元素,则将其后移,然后插入html代码。
insertAfter函数与after函数的作用是一样的,上面代码的insertAfter版本为:
- $('<div class="child">after()</div>').after('#middle');
- $('<div class="child">after()</div>').after('#middle');
四、before、insertBefore函数的使用
这连个函数的原理与after、insertAfter是一样的,只不过before、insertBefore是插入到目标元素的前面,大家可以自行参考after、insertAfter。
五、empty、remove函数的使用
执行以下代码:
- $('#middle').empty();
- $('#middle').empty();
效果图:
再来看看最终的html代码:
- <div id="middle" class="box"></div>
- <div id="middle" class="box"></div>
里面的html代码被清空了,然而元素本身还在。
执行以下语句:
- $('#middle').remove();
- $('#middle').remove();
效果图:
最终的html代码:
- <div id="top" class="box">
- <span>top</span>
- </div>
- <div id="bottom" class="box">
- <span>bottom</span>
- </div>
- <div id="top" class="box">
- <span>top</span>
- </div>
- <div id="bottom" class="box">
- <span>bottom</span>
- </div>
转载于:https://my.oschina.net/baiduapi/blog/526835
JQuery中html、append、appendTo、after、insertAfter系列方法相关推荐
- jQuery中的append()和appendTo()方法
jQuery中的append()和appendTo()方法的效果不是简单的"插入"元素到指定位置,实际上是"移动"元素到指定位置. 参考jQuery API中的 ...
- jquery动态追加html,jQuery中几种动态追加元素的方法
几乎所有网站的开发都离不开jQuery,jQuery可以很方便的实现网页中的一些效果,也很轻松的对网页中的一些DIV元素进行添加,修改或删除的操作.今天我们就说一说,如何对网页中某个指定的DIV进行元 ...
- jquery中删除元素的remove()方法
今天看jquery中删除元素的方法,包括remove()方法和empty() 方法 remove()方法为删除被选元素及子元素 empty() 方法为删除元素中的子元素 其中remove()方法还有一 ...
- jQuery中的append 和appendTo方法
append(content|fn) :向每个匹配元素内部的末尾处插入内容: <!DOCTYPE html> <html><head><meta charse ...
- jQuery中的append()和appendTo()
一.总结 append(content|fn) :向每个匹配元素内部的末尾处插入内容/*后加插入内容*/: appendTo(content) :将每个匹配的元素追加到指定的元素中的内部的末尾/*后加 ...
- jq中 html append appendto
jq操作html页面常用的有哪些方法: html方法,给元素添加html代码或者清空html代码(参数为空字符串): append向元素的末尾添加html代码: appendTo这个方法跟append ...
- Dynamics 365 讲清楚Security Role中的Append AppendTo
最近被问到这个问题,记忆有些模糊了,依稀记得我有写过博客分享过,但怎么搜都没搜到,无意间看了下草稿箱,发现已经在草稿箱里躺了两年多了.现在来完成这篇两年前就该完结的文章. Security Role中 ...
- jQuery中的append()方法
由于本人今天在一道题目的时候发现append()方法的神奇之处,所以特来分享 append()在指定元素插入一个新的节点或者元素,但是今天我再使用这个方法的时候他会覆盖类名相同的标签, ```java ...
- Jquery中对常用控件赋值的方法
场景 通过Jquery进行ajax请求数据后将返回的数据给页面中的 控件进行赋值. 实现 1.对input进行赋值$("#id").val("赋值");2.对l ...
最新文章
- 常惠琢 201771010102《面向对象程序设计(java)》第七周学习总结
- 基于jquery多种切换效果的焦点图(兼容ie6)
- php 算年龄,PHP计算年龄、
- 如何解决浏览器缩小出现横向滚动条时网页背景图出现空白的问题
- PHP 数据库 ODBC
- Ubuntu 添加、删除ppa源
- 【JAVA】FreeMarker学习1(Ftl)
- jQuery实现清空table表格除首行外的所有数据
- 瑞友天翼服务器ip地址怎么修改,怎么修改这个IP地址
- 18650锂电池保护板接线图_锂电池保护板的基础知识及常见不良分析
- 新域名后缀的主要优点是什么?
- 用户浏览器会话跟踪技术Cookie和Session
- 使用 vue-pdf 以及Lodop实现pdf打印预览功能
- 100首经典广告背景音乐
- PBRT学习笔记:在单位圆内部均匀采样
- 加拿大高中计算机学什么内容,加拿大大学计算机科学专业排名情况及学习内容简单介绍...
- UI设计师=美工?不同是人眼里UI设计师~
- 【华为OD机试 2023】 最多获得的短信条数/云短信平台优惠活动(C++ Java JavaScript Python)
- C语言编程题:用泰勒级数求自然数e的近似值
- 【视频学习】VALSE短教程《因果发现与因果性学习》 蔡瑞初教授
热门文章
- jQuery中选择器加尖括号的区别
- 苍狼敏捷方法核心 v1
- 从0-1教你利用服务器做属于自己的个人博客
- 2、ShardingSphere 之 Sharding-JDBC实现水平分表
- python写一个文件下载器_python使用tcp实现一个简单的下载器
- 华南理工计算机网络随随堂,计算机组成原理-2019春华工网络教育随堂练习
- 神策数据入选“2021CCFA 零售行业技术新锐企业榜单”
- PPT 下载 | 神策数据张涛:企业服务客户全生命周期运营三步曲客情诊断 解决方案库...
- LILY 英语携手神策数据 数据赋能少儿英语学习创新体验
- easyui accordion全部是关闭状态