Home > Article > Web Front-end > Can jquery add elements to divs?
jquery can add elements to divs. Methods: 1. Use "$("div").append(new element)" to add new elements to the end of the div; 2. Use "$ (new element).appendTo("div")" statement; 3. Use "$("div").prepend(new element)".
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
jquery can add elements to divs.
Adding elements to a div means adding sub-elements to the div; jquery provides a variety of methods for adding sub-elements. This article will introduce them to you.
4 ways to add child elements to divs using jquery
Method 1: Use the append() method
Use the append() method to add child elements to the "end" inside the div element.
Syntax:
$(A).append(B)
means inserting B at the end of A.
Example:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(function () { $("#btn").click(function () { var newp = "<p>一个新段落</p>"; $("div").append(newp); }) }) </script> </head> <body> <div style="background-color: #FF0000;"> <p>第一段文本</p> <p>第二段文本</p> <p>第三段文本</p> </div> <input id="btn" type="button" value="插入" /> </body> </html>
Method 2: Use the appendTo() method
appendTo() can also be Add child elements "at the end" inside the div element. Although the two methods
appendTo( ) and append( ) have similar functions, their operation objects are reversed.
Syntax:
$(A).appendTo(B)
means inserting A at the end of B.
Example:
$(function () { $("#btn").click(function () { var newp = "<p>一个新段落</p>"; $(newp).appendTo("div"); }) })
Method 3: Use prepend( )
prepend( ) method You can add child elements to the "beginning" inside a div element.
Syntax:
$(A).prepend(B)
means inserting B at the beginning of A.
Example:
$(function () { $("#btn").click(function () { var newp = "<p>一个新段落</p>"; $("div").prepend(newp); }) })
Method 4: Use prependTo( )
prependTo ( ) can also add child elements to the "beginning" inside the div element.
Although the two methods prependTo( ) and prepend( ) have similar functions, their operation objects are reversed.
Syntax:
$(A).prependTo(B)
means inserting A into the beginning of B.
Example:
$(function () { $("#btn").click(function () { var newp = "<p>一个新段落</p>"; $(newp).prependTo("div"); }) })
[Recommended learning: jQuery video tutorial, web front-end video]
The above is the detailed content of Can jquery add elements to divs?. For more information, please follow other related articles on the PHP Chinese website!