在Web開發中，動態地創建和管理DOM（文檔對象模型）節點是一項基本且強大的技能。jQuery，作為JavaScript的一個流行庫，以其簡潔的API簡化了這一過程。本文將通過一個簡單的示例，介紹如何使用jQuery來創建新的DOM節點，并將其插入到頁面的指定位置。
準備工作
首先，確保你的HTML文件已經正確引入了jQuery庫。在本例中，我們通過CDN鏈接引入了jQuery 3.7.1版本。
<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
創建新節點
jQuery允許你以字符串形式或使用JavaScript原生方法創建新的DOM元素。這里，我們將使用jQuery的構造函數 $() 直接創建一個<p>段落元素，并賦予初始文本內容。
// 使用jQuery創建一個新<p>節點并設置其文本內容
let oNewP = $("<p>這是一個插入</p>");
這一行代碼等同于使用原生JavaScript創建元素并設置文本的更冗長方式，但更加簡潔明了。
插入節點
創建了新節點后，下一步是將其插入到DOM樹中的某個位置。jQuery提供了多種方法來實現這一目的，如.append(), .prepend(), .before(), .after()等。本例中，我們將新創建的段落插入到ID為myTarget的元素之后。
// 將新創建的節點插入到id為'myTarget'的元素之后
oNewP.insertAfter("#myTarget");
insertAfter() 方法會找到匹配#myTarget的選擇器所對應的元素，并將新節點插入到這個元素之后。如果你想在目標元素之前插入，可以使用.before()方法。
完整示例代碼
將上述兩部分結合起來，完整的HTML文件如下所示，其中包含了創建新節點并插入的操作，以及必要的注釋說明。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery 創建與插入節點示例</title><!-- 引入jQuery庫 --><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body><!-- 目標元素，新節點將插入在此元素之后 -->
<p id="myTarget">插入在這行文字之后</p>
<p>這是原有內容，新節點不會插入在這里</p><script>// 文檔加載完成后執行$(function () {// 創建新<p>節點，包含文本“這是一個插入”let oNewP = $("<p>這是一個插入</p>");// 將新節點插入到id為'myTarget'的元素之后oNewP.insertAfter("#myTarget");});
</script></body>
</html>
通過這個簡單的示例，你可以看到jQuery是如何簡化DOM操作的，使得網頁的動態內容更新變得快速且直觀。掌握這些基本技巧，將為你構建交互式和響應式網頁打下堅實的基礎。
