📌  相关文章
📜  jQuery wrapInner()(1)

📅  最后修改于: 2023-12-03 15:02:13.157000             🧑  作者: Mango

jQuery wrapInner()

The wrapInner() method is a jQuery function that wraps an HTML structure around the content of the selected element(s).

Syntax:
$(selector).wrapInner(wrapper)
Parameters:
  • selector: A string containing a selector expression to select the element(s) to wrap the content around.
  • wrapper: An HTML element or string that will be wrapped around the selected element(s) content.
Return value:

The wrapInner() method returns the same jQuery object for chaining.

Example:
<!DOCTYPE html>
<html>
<head>
	<title>jQuery wrapInner() Example</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		$(document).ready(function(){
			$("#wrap").wrapInner("<div class='wrapper'></div>");
		});
	</script>
	<style>
		.wrapper {
			background-color: #f4f4f4;
			padding: 10px;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<p>This is the content that will be wrapped.</p>
	</div>
</body>
</html>

In the above example, the wrapInner() method wraps the content of the #wrap div element in a new div element with the class wrapper. The wrapper class is then used to style the new element with a light grey background and some padding.

Conclusion:

The wrapInner() method is a simple yet powerful jQuery function that can be used to add structure and style to the content of an element. Whether you need to wrap content in a new div element, apply a class or a custom attribute, the wrapInner() method can help you achieve your goal quickly and easily.