Can jquery add elements to divs?-Front-end Q&A-php.cn

Can jquery add elements to divs?

青灯夜游

Release： 2022-04-21 13:09:49

Original

4994 people have browsed it

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)

Copy after login

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>

Copy after login

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)

Copy after login

means inserting A at the end of B.

Example:

$(function () {
	$("#btn").click(function () {
		var newp = "<p>一个新段落</p>";
		$(newp).appendTo("div");
		
	})
})

Copy after login

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)

Copy after login

means inserting B at the beginning of A.

Example:

$(function () {
	$("#btn").click(function () {
		var newp = "<p>一个新段落</p>";
		$("div").prepend(newp);
	})
})

Copy after login

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)

Copy after login

means inserting A into the beginning of B.

Example:

$(function () {
	$("#btn").click(function () {
		var newp = "<p>一个新段落</p>";
		$(newp).prependTo("div");
		
	})
})

Copy after login

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!