


Detailed explanation of jquery's insertBefore(), insertAfter(), prependTo(), appendTo() usage
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 )
Copy after login
ParametersjQueryObject.insertAfter( target )
Description | |
---|---|
##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>
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>
<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>
Specific usage of the function: <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div>
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> Copy after login 请注意 <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> Copy after login 以下面这段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> Copy after login 以下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> Copy after login 运行代码
<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> Copy after login 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! Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![]() Hot AI Tools![]() Undresser.AI UndressAI-powered app for creating realistic nude photos ![]() AI Clothes RemoverOnline AI tool for removing clothes from photos. ![]() Undress AI ToolUndress images for free ![]() Clothoff.ioAI clothes remover ![]() AI Hentai GeneratorGenerate AI Hentai for free. ![]() Hot Article
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle Solution
2 weeks ago
By DDD
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
3 weeks ago
By 尊渡假赌尊渡假赌尊渡假赌
![]() Hot Tools![]() Notepad++7.3.1Easy-to-use and free code editor ![]() SublimeText3 Chinese versionChinese version, very easy to use ![]() Zend Studio 13.0.1Powerful PHP integrated development environment ![]() Dreamweaver CS6Visual web development tools ![]() SublimeText3 Mac versionGod-level code editing software (SublimeText3) ![]() Hot Topics
CakePHP Tutorial
![]() ![]() ![]() Detailed explanation of jQuery reference method: Quick start guide jQuery is a popular JavaScript library that is widely used in website development. It simplifies JavaScript programming and provides developers with rich functions and features. This article will introduce jQuery's reference method in detail and provide specific code examples to help readers get started quickly. Introducing jQuery First, we need to introduce the jQuery library into the HTML file. It can be introduced through a CDN link or downloaded ![]() How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u ![]() How to remove the height attribute of an element with jQuery? In front-end development, we often encounter the need to manipulate the height attributes of elements. Sometimes, we may need to dynamically change the height of an element, and sometimes we need to remove the height attribute of an element. This article will introduce how to use jQuery to remove the height attribute of an element and provide specific code examples. Before using jQuery to operate the height attribute, we first need to understand the height attribute in CSS. The height attribute is used to set the height of an element ![]() jQuery is a fast, small, feature-rich JavaScript library widely used in front-end development. Since its release in 2006, jQuery has become one of the tools of choice for many developers, but in practical applications, it also has some advantages and disadvantages. This article will deeply analyze the advantages and disadvantages of jQuery and illustrate it with specific code examples. Advantages: 1. Concise syntax jQuery's syntax design is concise and clear, which can greatly improve the readability and writing efficiency of the code. for example, ![]() Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: < ![]() Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file: ![]() How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute ![]() jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s ![]() |