Home > Article > Web Front-end > Can jquery add elements to divs?
Can jquery add elements to divs?
- 青灯夜游Original
- 2022-04-21 13:09:375016browse
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!