insertAfter()是jQuery中的内置方法,用于在指定元素后插入一些HTML内容。每次出现指定元素后,将插入HTML内容。
用法:
$(content).insertAfter(target)
“content”是要在指定目标之后插入的HTML内容。
参数:它采用参数“target”作为目标,之后将插入内容。
返回值:它不返回任何值。
代码1:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("div").click(function() {
// insertAfter
$("<p>You should follow GeeksForGeeks</p>").insertAfter("p");
});
});
</script>
</head>
<body>
<p>To learn jQuery : </p>
<div>Click here to complete</div>
</body>
</html>
输出:
在点击div内容之前,
To learn jQuery : Click here to complete
点击div内容后,
To learn jQuery : You should follow GeeksForGeeks Click here to complete
代码2:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("div").click(function() {
// insertAfter
$("<p>You should follow GeeksForGeeks</p>").insertAfter("p");
});
});
</script>
</head>
<body>
<p>To learn jQuery : </p>
<p> To learn coding : </p>
<div>Click here to complete</div>
</body>
</html>
输出:
在点击div内容之前,
To learn jQuery : To learn coding : Click here to complete
点击div内容后,
To learn jQuery : You should follow GeeksForGeeks To learn coding : You should follow GeeksForGeeks Click here to complete
相关用法
- JQuery val()用法及代码示例
- JQuery after()用法及代码示例
- JQuery on()用法及代码示例
- JQuery last()用法及代码示例
- JQuery has()用法及代码示例
- JQuery first()用法及代码示例
- JQuery eq()用法及代码示例
- JQuery one()用法及代码示例
- JQuery slideUp()用法及代码示例
- JQuery size()用法及代码示例
- JQuery slice()用法及代码示例
- JQuery prop()用法及代码示例
- JQuery mousemove()用法及代码示例
- JQuery serializeArray()用法及代码示例
- JQuery serialize()用法及代码示例
注:本文由纯净天空筛选整理自ShivamKD大神的英文原创作品 jQuery | insertAfter() with Examples。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。