Home  >  Article  >  Web Front-end  >  Can jquery add elements to divs?

Can jquery add elements to divs?

青灯夜游
青灯夜游Original
2022-04-21 13:09:375005browse

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)".

Can jquery add elements to divs?

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>

Can jquery add elements to divs?

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");
		
	})
})

Can jquery add elements to divs?

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);
	})
})

Can jquery add elements to divs?

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");
		
	})
})

Can jquery add elements to divs?

[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!

Statement:
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