JQuery insertBefore()用法及代碼示例

insertBefore()是jQuery中的內置方法，用於在指定元素之前插入一些HTML內容。 HTML內容將在每次出現指定元素之前插入。
用法:

$(content).insertBefore(target)

這裏的內容是需要在指定目標之前插入的HTML內容。
參數：它接受參數“target”，該參數是要在其之前插入內容的目標。
返回類型：它不返回任何值。

jQuery代碼顯示insertBefore()方法的用法方式：
代碼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() { 
                // insertBefore 
                $("<p>You should follow GeeksForGeeks</p>").insertBefore("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內容後，

You should follow GeeksForGeeks
To learn jQuery 
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() { 
                // insertBefore 
                $("<p>You should follow GeeksForGeeks</p>").insertBefore("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內容後，

You should follow GeeksForGeeks
To learn jQuery 
You should follow GeeksForGeeks
To learn coding
Click here to complete

相關用法

注：本文由純淨天空篩選整理自ShivamKD大神的英文原創作品 jQuery | insertBefore() with Examples。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。