Home > Article > Web Front-end > How to use jQuery's insertBefore() method
How to use jQuery's insertBefore() method
- 青灯夜游Original
- 2019-02-14 15:05:035047browse
jQuery's insertBefore() method is used to insert some HTML content before a specified element. Its usage syntax is "$(content).insertBefore(target)".
The operating environment of this article: Windows 7 system, Dell G3 computer, jquery version 3.2.1.
insertBefore() is a built-in method of jQuery, used to insert some HTML content before a specified element. The following article will introduce to you the usage of insertBefore(), I hope it will be helpful to you.
jQuery's insertBefore() method
The insertBefore() method will insert HTML content before each occurrence of the specified element. [Video tutorial recommendation: jQuery tutorial]
Basic sentence structure:
$(content).insertBefore(target)
Instructions:
content: Indicates the HTML content that needs to be inserted before the specified target.
target: Indicates the specified target.
InsertBefore() method usage example
Example 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".demo").click(function() {
// insertBefore
$("<div>在PHP中文网中学习！</div>").insertBefore("p");
});
});
</script>
</head>
<body>
<div class="box">
<p>学习jQuery</p>
<div class="demo">单击此处</div>
</div>
</body>
</html>Rendering:
Description:
When the DOM (Document Object Model) has been loaded and the page (including images) has been fully rendered, The ready event will occur. However, the ready() function specifies the code that needs to be executed when the ready event occurs.
$(".demo").click(): Indicates the code that needs to be executed when a click event occurs on the .demo element.
Example 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".demo").click(function() {
// insertBefore
$("<div>在PHP中文网中学习！</div>").insertBefore("p");
});
});
</script>
</head>
<body>
<div class="box">
<p>学习jQuery</p>
<p>学习php</p>
<div class="demo">单击此处</div>
</div>
</body>
</html>Rendering:
The above is the entire content of this article, I hope It can be helpful to everyone’s study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !
The above is the detailed content of How to use jQuery's insertBefore() method. For more information, please follow other related articles on the PHP Chinese website!