在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操作的，使得网页的动态内容更新变得快速且直观。掌握这些基本技巧，将为你构建交互式和响应式网页打下坚实的基础。
