How to add content to the end of div in jquery-Front-end Q&A-php.cn

How to add content to the end of div in jquery

青灯夜游

Release： 2022-04-27 20:56:23

Original

3256 people have browsed it

Add method: 1. Use append(), the syntax "$("div").append("content value")", you can insert the specified content at the end of the div; 2. Use appendTo() , the syntax "$("content value").appendTo("div")" can insert the specified content at the end of the div.

How to add content to the end of div in jquery

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

There are two ways for jquery to add content to the end of a div:

append( ) method
appendTo( ) method

Note: Although the two methods appendTo( ) and append( ) have similar functions, they both insert to the "end" of the selected element. content, but the operating objects of the two are reversed.

1. Use the append() method

Syntax:

$(A).append(B)

Copy after login

means going to the end of A Insert B.

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").append("这是往div末尾增加的新文本内容");;
				});
			});
		</script>
	</head>
	<body>

		<div style="height:100px;background-color:yellow">
			这是一些文本。
			<p>这是div块中的一个p段落。</p>
		</div><br>
		<button>往div末尾增加内容</button>

	</body>
</html>

Copy after login

How to add content to the end of div in jquery

##2. Use the appendTo() method

Syntax:

$(A).appendTo(B)

Copy after login

means inserting A into the end of B.

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("<span style=&#39;color:pink;&#39;>这是一个新增的span元素</span>").appendTo("div");;
				});
			});
		</script>
	</head>
	<body>

		<div style="height:100px;background-color:yellow">
			这是一些文本。
			<p>这是div块中的一个p段落。</p>
		</div><br>
		<button>往div末尾增加内容</button>

	</body>
</html>

Copy after login

How to add content to the end of div in jquery

[Recommended learning:

jQuery video tutorial, web front-end video】

The above is the detailed content of How to add content to the end of div in jquery. For more information, please follow other related articles on the PHP Chinese website!