How to use jQuery's insertBefore() method-JS Tutorial-php.cn

How to use jQuery's insertBefore() method

青灯夜游

Release： 2021-04-22 15:31:02

Original

5104 people have browsed it

jQuery's insertBefore() method is used to insert some HTML content before a specified element. Its usage syntax is "$(content).insertBefore(target)".

How to use jQuery's insertBefore() method

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)

Copy after login

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>

Copy after login

Rendering:

How to use jQuerys insertBefore() method

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>

Copy after login

Rendering:

How to use jQuerys insertBefore() method

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!