jQuery DOM 操作 - 2
jQuery DOM 操作 - 2
jQuery DOM 操作 - 2 是 CoddyKit 上的免费 jQuery Academy 课时。 这是第 1 节课，共 1 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 1 节课。
本课时的部分内容尚未翻译，以英文显示。
简介与 append
您好，
到目前为止，在示例中我们已经对 HTML DOM 对象执行了更新或读取操作。
接下来我们将学习如何使用 append() 方法执行插入操作。
让我们来看一个示例。
<button id="add">
Add New Item
</button>
<div id="target"></div>
<script>
/*
Listen for an element with
the add id click
*/
$('#add').click(function(){
/*
append '<p>This is the appended
text</p>' to #target element
*/
$("#target").append("<p>Appended text</p>");
})
</script>append
运行上述代码后，append 方法会将 HTML（作为参数传入）的代码添加到#test 元素的末尾。
prepend
prepend() 方法
append() 方法的相反操作是 prepend() 方法。append() 方法会将内容添加到目标元素内容的末尾，而 prepend 会将内容添加到开头。
<div id="target"></div>
<button id="add">
Add New Item
</button>
<script>
/*
Listen for an element
with the add id click
*/
$('#add').click(function(){
/* append '<p>This is the prepended text</p>'
to #target element
*/
$("#target").prepend("<p>This is the appended text</p>");
})
</script>问题
通过 append 和 prepend 方法，我们可以在目标元素的末尾和开头添加新的 HTML 元素。
那么，如果我们想将元素添加为目标元素的同级元素，应该怎么做呢？
示例
让我们继续之前的示例。
第一种情况下，我们的 HTML 节点如下。
<div id="test">
<p>initial paragraph</p>
</div>after - before 方法
after() 和 before() 方法
我们可以使用 after() 和 before() 方法，在目标元素之前或之后添加 HTML 元素。
在下面的示例代码中，我们在同级元素层次结构中，将新元素添加到了 id 为 #test 的元素正前方和正后方。
<div id="test">
<p>initial paragraph</p>
</div>
<script>
$('#test').before('<p>I am before the #test element</p>');
$('#test').after('<p>I am after the #test element</p>');
</script>
多项插入
到目前为止，我们已经学习了 prepend()、append()、before() 和 after() 方法。还有一个主题我忘了解释。很抱歉，我有时会忘记事情 😇。
那么，如果我们想同时添加多个节点，该怎么做呢？
如下方示例所示，
我们可以向相关方法传入多个参数，从而同时添加多个节点。
<p>
<span id="target"></span>
</p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';
/*
The following four methods work
with the same logic and take
more than one argument.
*/
$('#target').before(firstNode, secondNode, thirdNode);
$('#target').after(firstNode, secondNode, thirdNode);
$('#target').append(firstNode, secondNode, thirdNode);
$('#target').prepend(firstNode, secondNode, thirdNode);
</script>链式调用示例
在上面的示例中，我们同时添加了多个节点。正如您所见，即使使用的是不同的方法，语法也会保持不变。
此外，我们还可以通过修改 jQuery 的写法来编写代码。
这样，我们就能写出更短、更高效的代码。
让我们来看一个示例，学习如何在 jQuery 中编写链式代码。
<p id="test"></p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';
/*
We made our code shorter.
Also, we have done the select operation
on the DOM only once instead of twice.
*/
$('#test').before(firstNode, secondNode, thirdNode)
.after(firstNode, secondNode, thirdNode);
</script>wrap 方法
wrap() 方法
如果我们想把 HTML 元素放入另一个容器中，应该使用什么方法呢？
当然是使用 wrap() 方法。
下面的示例展示了 wrap 方法的简单用法。
<div id="target"></div>
<script>
/*
When we apply the code below.
The node we assigned as an argument
will come around our target element.
*/
$("#target").wrap('<div class="container">Container wrapped the target element</div>');
//The result will be as follows
/*
<div class="container">
Container wrapper the target element
<div id="target">
</div>
</div>
*/
</script>
Question
unwrap 方法
unwrap() 方法
它是 wrap() 方法的相反操作。使用 unwrap() 方法，我们可以删除目标元素的父元素。
const $ = (selector) => ({
unwrap: () => console.log(`Unwrapped ${selector}`)
});
$("#target").unwrap();empty 方法
empty() 方法
让我们看看如何删除 HTML 元素中的内容。
使用 empty() 方法，我们可以删除目标元素的所有子元素和后代元素。
// Removes all descendants of the element from the DOM.
// (Simulated for Node.js environment)
const $ = (selector) => ({
empty: () => console.log(`Removed all descendants of ${selector}`)
});
$("#target").empty();remove() 方法
remove() 方法
remove() 方法不仅会删除元素的后代元素，还会将元素本身从 DOM 中删除。
/*
Removes the element and
all descendants of the element from the DOM.
*/
$('#target').remove();恭喜
恭喜您 🎉
我们学习了 DOM 操作。
下一节中，我们将学习使用 jQuery 设置样式。
常见问题解答
「jQuery DOM 操作 - 2」课时是免费的吗？
是的 — 「jQuery DOM 操作 - 2」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 1 节课。
「jQuery DOM 操作 - 2」这节课中我会学到什么？
jQuery DOM 操作 - 2 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 jQuery Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 1 节。
「jQuery DOM 操作 - 2」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 jQuery Academy 课中编写并运行代码吗？
能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。