jQuery 入门：轻松创建与插入节点

在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>