首頁 > web前端 > js教程 > jQuery的insertBefore()方法怎麼用

jQuery的insertBefore()方法怎麼用

青灯夜游
發布: 2021-04-22 15:31:02
原創
5096 人瀏覽過

jQuery的insertBefore()方法是用來在一個指定的元素之前插入一些HTML內容,其使用語法是「$(content).insertBefore(target)」。

jQuery的insertBefore()方法怎麼用

本文操作環境:Windows7系統、Dell G3電腦、jquery3.2.1版。

insertBefore()是jQuery的一個內建的方法,用來在一個指定的元素之前插入一些HTML內容。以下這篇文章就來跟大家介紹一下insertBefore()的用法,希望對大家有幫助。

jQuery的insertBefore()方法

insertBefore()方法將在每次出現指定元素之前插入HTML內容。 【影片教學推薦:jQuery教學

基本句式:

$(content).insertBefore(target)
登入後複製

##說明:# #content:表示需要在指定目標之前插入的HTML內容。

target:表示指定目標。

insertBefore()方法的使用範例

#範例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>
登入後複製
效果圖:

jQuery的insertBefore()方法怎麼用

說明:

當DOM(文件物件模型) 已經加載,並且頁面(包括圖像)已經完全呈現時,會發生ready 事件。而,ready() 函數指定當 ready 事件發生時需要執行的程式碼。

$(".demo").click():表示當.demo元素發生點擊事件時需要執行的程式碼。

範例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>
登入後複製
效果圖:

jQuery的insertBefore()方法怎麼用以上就是這篇文章的全部內容,希望能對大家的學習有所幫助。更多精彩內容大家可以追蹤php中文網相關教學欄位! ! !

以上是jQuery的insertBefore()方法怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板