快捷導(dǎo)航

jQuery向DOM中添加元素的多種方法

更新時(shí)間：2026年02月10日 09:05:20 作者：lly202406

在網(wǎng)頁(yè)開(kāi)發(fā)中,jQuery 是一種廣泛使用的JavaScript庫(kù),它簡(jiǎn)化了HTML文檔遍歷、事件處理、動(dòng)畫和AJAX操作,其中,jQuery 提供了多種方法來(lái)添加元素到DOM中,本文將詳細(xì)介紹jQuery添加元素的相關(guān)知識(shí),需要的朋友可以參考下

引言

在網(wǎng)頁(yè)開(kāi)發(fā)中，jQuery 是一種廣泛使用的JavaScript庫(kù)，它簡(jiǎn)化了HTML文檔遍歷、事件處理、動(dòng)畫和AJAX操作。其中，jQuery 提供了多種方法來(lái)添加元素到DOM中。本文將詳細(xì)介紹jQuery添加元素的相關(guān)知識(shí)，包括方法、語(yǔ)法和示例。

1. jQuery 添加元素的方法

jQuery 提供了多種方法來(lái)向DOM中添加元素，以下是一些常見(jiàn)的方法：

1.1.append()方法

append() 方法用于向每個(gè)匹配的元素內(nèi)部末尾添加內(nèi)容。

$("selector").append(content);

selector：CSS選擇器，用于選擇需要添加元素的父元素。
content：要添加到父元素內(nèi)部末尾的內(nèi)容，可以是HTML字符串、jQuery對(duì)象或DOM元素。

1.2.prepend()方法

prepend() 方法用于向每個(gè)匹配的元素內(nèi)部開(kāi)頭添加內(nèi)容。

$("selector").prepend(content);

selector：CSS選擇器，用于選擇需要添加元素的父元素。
content：要添加到父元素內(nèi)部開(kāi)頭的內(nèi)容，可以是HTML字符串、jQuery對(duì)象或DOM元素。

1.3.after()方法

after() 方法用于在每個(gè)匹配的元素之后插入內(nèi)容。

$("selector").after(content);

selector：CSS選擇器，用于選擇需要插入內(nèi)容的元素的前一個(gè)兄弟元素。
content：要插入到前一個(gè)兄弟元素之后的內(nèi)容，可以是HTML字符串、jQuery對(duì)象或DOM元素。

1.4.before()方法

before() 方法用于在每個(gè)匹配的元素之前插入內(nèi)容。

$("selector").before(content);

selector：CSS選擇器，用于選擇需要插入內(nèi)容的元素的后一個(gè)兄弟元素。
content：要插入到后一個(gè)兄弟元素之前的內(nèi)容，可以是HTML字符串、jQuery對(duì)象或DOM元素。

2. 示例

以下是一個(gè)簡(jiǎn)單的示例，演示如何使用jQuery添加元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 添加元素示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="addElement">添加元素</button>
<div id="container"></div>

<script>
$(document).ready(function() {
    $("#addElement").click(function() {
        $("#container").append("<p>這是一個(gè)新添加的段落。</p>");
    });
});
</script>
</body>
</html>

在上述示例中，點(diǎn)擊按鈕后，會(huì)在 <div> 元素內(nèi)部末尾添加一個(gè)新段落。