Home  >  Article  >  Web Front-end  >  How to add content after the specified element in jquery

How to add content after the specified element in jquery

青灯夜游
青灯夜游Original
2022-05-17 11:35:498541browse

Two methods: 1. Use after(), the syntax "$(specified element).after("new content")" to add specified content after the specified element. 2. Use insertAfter(), the syntax "$("content value").insertAfter(specified element)" to insert content after the specified element.

How to add content after the specified element in jquery

The operating environment of this tutorial: windows7 system, jquery3.2.1 version, Dell G3 computer.

How to add content after the specified element in jquery

To add content after the specified element is to insert sibling elements after the specified element. jquery provides two methods:

  • after()

  • insertAfter()

after Both ( ) and insertAfter( ) can insert specified content after the selected element, but their operation objects are reversed. Let’s introduce it in detail below.

1. Use after()

$(A).after(B) means inserting B after the outside of A.

Example:

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

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

	</body>
</html>

How to add content after the specified element in jquery

2. Use insertAfter()

$( A).insertAfter(B) means inserting A after the outside 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>").insertAfter("div");
				});
			});
		</script>
	</head>
	<body>

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

	</body>
</html>

How to add content after the specified element in jquery

[Recommended learning: jQuery video tutorial, web front-end video]

The above is the detailed content of How to add content after the specified element in jquery. 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