


Navigation:
1, insertBefore(), insertAfter(), prependTo(), appendTo() these four functions are almost the same in usage
2, In contrast, there are four functions: Before(),After(),prepend(),append()
1, jQuery.insertAfter() Detailed explanation of function(The other three refer to their usage)
##insertAfter() The function is used to
insert all current matching elements after the specified element.
Relative to this function is the insertBefore() function, which is used to insert all current matching elements before the specified element .
This function belongs to thejQuery object (instance).
jQueryObject.insertAfter( target )
ParametersDescription | |
---|---|
##String/Element/jQuery type specification The target element so that the currently matched element is inserted after the target. |
is a string type, it is treated as a jQuery selector or html content string, jQuery I will make my own judgment. Return value
insertAfter()
The return value of the functionis
jQuery Type that returns a jQuery object representing the inserted content. Note: If the elements matched by the current jQuery object are certain elements in the current page, then these elements will
from their original positions. In short, this is equivalent to a move operation, not a copy operation. Example & Description
insertAfter()
function is used to insert all matching elements into the specified element Position after : <span class="tag" style="font-size: 18px;"><p><span class="pln">段落文本1<span class="tag"><span></span></p><span class="pln"><br/><span class="tag"><p><span class="pln">段落文本2<span class="tag"><span></span></p><span class="pln"><br/><br/><span class="com"><!--以上是jQuery代码执行前的html内容--><span class="pln"><br/><span class="tag"><script<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text/<a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a>"<span class="tag">><span class="pln"><br/>$<span class="pun">(<span class="str">'<!--插入到p元素之后的位置-->'<span class="pun">).<span class="pln">insertAfter<span class="pun">(<span class="pln"> <span class="str">"p"<span class="pln"> <span class="pun">);<span class="pln"><br/><span class="com">// 其返回值就是匹配插入内容(两个注释元素'<!--插入到p元素之后的位置-->')的jQuery对象<span class="pln"><br/><span class="tag"></script><span class="pln"><br/><span class="com"><!--以下是jQuery代码执行后的html内容--><span class="pln"><br/><br/><span class="tag"><p><span class="pln">段落文本1<span class="tag"><span></span></p><span class="com"><!--插入到p元素之后的位置--><span class="pln"><br/><span class="tag"><p><span class="pln">段落文本2<span class="tag"><span></span></p><span class="com"><!--插入到p元素之后的位置--></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
Please note the difference between the
function and the after() function:
<span class="kwd" style="font-size: 18px; color: #0000ff;">var<span class="pln"> $A <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"s1"<span class="pun">);<span class="pln"><br/><span class="kwd">var<span class="pln"> $B <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"s2"<span class="pun">);<span class="pln"><br/><br/><span class="com">// 将$A插入到$B之后<span class="pln"><br/>$A<span class="pun">.<span class="pln">insertAfter<span class="pun">(<span class="pln"> $B <span class="pun">);<span class="pln"> <span class="com">// 返回表示插入内容的jQuery对象( 匹配所有$B之后插入的$A元素 )<span class="pln"><br/><span class="com">// 将$B插入到$A之后<span class="pln"><br/>$A<span class="pun">.<span class="pln">after<span class="pun">(<span class="pln"> $B <span class="pun">);<span class="pln"> <span class="com">// 返回$A</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
Take the following HTML code as an example:
<span class="tag" style="font-size: 18px;"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/> <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">span#n2<span class="tag"></span><span class="pln"> <br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/> <span class="tag"><label<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"move"<span class="tag">><span class="pln">label#n4<span class="tag"></label><span class="pln"><br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln"><br/> <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n6"<span class="tag">><span class="pln">span#n6<span class="tag"></span><span class="pln"><br/><span class="tag"></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>The following jQuery sample code is used to demonstrate insertAfter()
Specific usage of the function: <pre class='brush:php;toolbar:false;'><span class="com" style="font-size: 18px;">// 将一个自定义的i元素插入到n4之后<span class="pln"><br/>$<span class="pun">(<span class="str">&#39;<i>i元素</i>&#39;<span class="pun">).<span class="pln">insertAfter<span class="pun">(<span class="pln"> <span class="str">"#n4"<span class="pln"> <span class="pun">);<span class="pln"><br/><br/><span class="com">// 将n4插入到n2之后<span class="pln"><br/><span class="com">// n4将从原位置上消失<span class="pln"><br/>$<span class="pun">(<span class="str">&#39;#4&#39;<span class="pun">).<span class="pln">insertAfter<span class="pun">(<span class="pln"> document<span class="pun">.<span class="pln">getElementById<span class="pun">(<span class="str">"n2"<span class="pun">)<span class="pln"> <span class="pun">);<span class="pln"><br/><br/><span class="com">//将一个自定义的strong元素插入到每个span元素之后<span class="pln"><br/>$<span class="pun">(<span class="str">"<strong>插入文本</strong>"<span class="pun">).<span class="pln">insertAfter<span class="pun">(<span class="pln"> <span class="str">"span"<span class="pln"> <span class="pun">);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
Run the code
##insertAfter()
will insert the current matching element into the target element After the closing tag , will not add any additional whitespace characters
. The complete html code after the above code is executed is as follows (no adjustment to the format): <span class="tag" style="font-size: 18px;"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/> <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">span#n2<span class="tag"></span><strong><span class="pln">插入文本<span class="tag"></strong><span class="pln"> <br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/> <span class="tag"><label<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"move"<span class="tag">><span class="pln">label#n4<span class="tag"></label><i><span class="pln">i元素<span class="tag"></i><span class="pln"><br/><span class="tag"></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
after()
function is used toinsert specified content after each matching element. The specified content can be: html string, DOM element (or array), jQuery object, function (return value).
Relative to this function is the before() function, which is used to insert specified content before each matching element
.This function belongs to the jQuery object (instance).
Syntax
jQueryObject.after( content1 [, content2 [, contentN ]] )
Parameters
Parameter
Description | ##content1 |
---|---|
content2 | |
contentN | |
jQuery 1.4 新增支持:参数
注意:只有第一个参数可以为自定义函数,用于遍历执行。如果之后的参数也为函数,则调用其toString()方法,将其转为字符串,并视为html内容。 返回值
注意:如果插入的内容是当前页面中的某些元素,那么这些元素将从原位置上消失。简而言之,这相当于一个移动操作,而不是复制操作。 示例&说明
<span class="tag" style="font-size: 14pt;"><p><span class="pln">段落文本1<span class="tag"><span></span></p><span class="com"><!--插入到p元素之后的位置--><span class="pln"><br/><span class="tag"><p><span class="pln">段落文本2<span class="tag"><span></span></p><span class="com"><!--插入到p元素之后的位置--><span class="pln"><br/><br/><br/><span class="tag"><script<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text/javascript"<span class="tag">><span class="pln"><br/>$<span class="pun">(<span class="str">"p"<span class="pun">).<span class="pln">after<span class="pun">(<span class="pln"> <span class="str">'<!--插入到p元素之后的位置-->'<span class="pln"> <span class="pun">);<span class="pln"> <br/><span class="tag"></script></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> 请注意 <span class="kwd" style="font-size: 14pt;">var<span class="pln"> $A <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"s1"<span class="pun">);<span class="pln"><br/><span class="kwd">var<span class="pln"> $B <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"s2"<span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 将$B插入到$A之后<span class="pln"><br/>$A<span class="pun">.<span class="pln">after<span class="pun">(<span class="pln"> $B <span class="pun">);<span class="pln"> <span class="com">// 返回$A<span class="pln"><br/><span class="com">// 将$A插入到$B之后<span class="pln"><br/>$A<span class="pun">.<span class="pln">insertAfter<span class="pun">(<span class="pln"> $B <span class="pun">);<span class="pln"> <span class="com">// 返回表示插入内容的jQuery对象( 匹配所有$B之后插入的$A元素 )</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> 以下面这段HTML代码为例: <span class="tag" style="font-size: 14pt;"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/> <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">span#n2<span class="tag"></span><span class="pln"> <br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/> <span class="tag"><label<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="tag">><span class="pln">label#n4<span class="tag"></label><span class="pln"><br/> <span class="tag"><i<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln">i#n5<span class="tag"></i><span class="pln"><br/><span class="tag"></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> 以下jQuery示例代码用于演示 <span class="com" style="font-size: 14pt;">// 在n4之后插入一个自定义的span元素<span class="pln"><br/>$<span class="pun">(<span class="str">"#n4"<span class="pun">).<span class="pln">after<span class="pun">(<span class="str">'<span id="n6">span#n6(new)</span>'<span class="pun">);<span class="pln"><br/><br/><span class="com">// 在n2之后插入n5<span class="pln"><br/><span class="com">// n5将从原位置上消失<span class="pln"><br/>$<span class="pun">(<span class="str">"#n2"<span class="pun">).<span class="pln">after<span class="pun">(<span class="pln"> document<span class="pun">.<span class="pln">getElementById<span class="pun">(<span class="str">"n5"<span class="pun">)<span class="pln"> <span class="pun">);<span class="pln"><br/><br/><span class="com">// 在每个span元素之后插入自定义的strong元素<span class="pln"><br/>$<span class="pun">(<span class="str">"span"<span class="pun">).<span class="pln">after<span class="pun">(<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">index<span class="pun">,<span class="pln"> innerHTML<span class="pun">){<span class="pln"><br/> <span class="kwd">return<span class="pln"> <span class="str">'<strong>strong元素'<span class="pln"> <span class="pun">+<span class="pln"> <span class="pun">(<span class="pln">index <span class="pun">+<span class="pln"> <span class="lit">1<span class="pun">)<span class="pln"> <span class="pun">+<span class="pln"> <span class="str">'</strong>'<span class="pun">;<span class="pln"><br/><span class="pun">}<span class="pln"> <span class="pun">);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> 运行代码
<span class="tag" style="font-size: 14pt;"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/> <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">span#n2<span class="tag"></span><strong><span class="pln">strong元素1<span class="tag"></strong><i<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln">i#n5<span class="tag"></i><span class="pln"> <br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/> <span class="tag"><label<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="tag">><span class="pln">label#n4<span class="tag"></label><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n6"<span class="tag">><span class="pln">span#n6(new)<span class="tag"></span><strong><span class="pln">strong元素2<span class="tag"></strong><span class="pln"><br/> <br/><span class="tag"></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> |
The above is the detailed content of Detailed explanation of jquery's insertBefore(), insertAfter(), prependTo(), appendTo() usage. For more information, please follow other related articles on the PHP Chinese website!

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

修改方法:1、用attr(),可设置被选元素的指定属性的值,语法“元素对象.attr("title","新值")”,新值将覆盖旧值;2、用prop(),可为匹配元素集合设置指定属性值,语法“元素对象.prop("title","新值")”。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SublimeText3 English version
Recommended: Win version, supports code prompts!

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Zend Studio 13.0.1
Powerful PHP integrated development environment

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
