jQuery prependTo() 方法

jQuery 中的 prependTo() 方法用於將指定內容作為匹配元素集的每個元素的第一個子元素插入。它將指定內容新增到每個目標元素的開頭。

如果我們想將 HTML 元素新增到所選目標元素的結尾，我們需要使用appendTo() 方法。

語法

以下是 jQuery 中 prependTo() 方法的語法：

$(content).prependTo(selector)

引數

此方法接受以下引數：

content: 要新增到目標元素(s)開頭的 HTML 元素。
selector: 將內容新增到其中的目標元素(s)。

注意: 如果提供的content 已經是現有元素，它將從其在 DOM 中的當前位置移動，然後插入到所選目標元素(s)的開頭。

示例 1

在下面的示例中，我們使用 prependTo() 方法將一個 元素新增到 元素的開頭：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("<span><i> This is a newly appended span element.</i></span>").prependTo("p");
  })
});
</script>
</head>
<body>
<p>Paragraph element.</p>
<button>Click here!</button>
</body>
</html>

當我們執行上述程式並單擊按鈕時， 元素將新增到 元素的開頭。

示例 2

在下面的示例中，我們將一個現有元素 () 新增到段落元素的開頭：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("span").prependTo("p");
  })
});
</script>
</head>
<body>
<p>Paragrapah element.</p>
<button>Click here!</button>
<span><i> This is a newly appended span element.</i></span>
</body>
</html>

由於提供的 content 已經是現有元素，它將從其在 DOM 中的當前位置移動，然後插入到 （目標元素）的開頭。

jquery_ref_html.htm

列印頁面