jquery+加入新元素_jQuery How-to：创建和插入新元素（第1部分）

最新推荐文章于 2024-07-20 17:12:48 发布

cune1359

最新推荐文章于 2024-07-20 17:12:48 发布

阅读量176

点赞数

文章标签： python java javascript js 编程语言 ViewUI

jQuery是地球上最受欢迎JavaScript库之一，它提供了很多功能。使用jQuery，我们可以轻松地操作-替换，插入，删除HTML文档中的元素，甚至创建动画。

在本文中，我们将研究如何使用jQuery Append方法在DOM中创建或插入新元素。

追加是一种在指定元素内创建和插入新元素的方法，从技术上讲，它是在该指定元素的结束标记之前插入新元素，从而成为其子元素。

在继续之前，我们将首先向您展示如何纯粹使用JavaScript进行操作，因此您可以看到jQuery可以使该方法简单得多。

在JavaScript中，在能够向文档中添加元素之前，我们需要定义（创建）该元素。我们可以使用.createElement()函数来创建一个新元素。在下面的示例中，我们创建一个新的<div>元素并将其存储在名为div的变量中。

var div = document.createElement('div');

到我们用此函数定义一个新元素时，它只会创建该元素，但不会将新元素插入文档中。我们需要调用一个函数，即.appendChild()来插入该元素。在下面的示例中，我们将在主体文档中简单地插入这个新的<div> 。

var div = document.createElement('div');
document.body.appendChild(div);

如果我们在Developer Tool中检查文档，则应该看到在body结束标记之前，我们的div元素已插入其中。

现在，让我们看看我们如何使用jQuery做同样的事情。 jQuery使操作文档元素更加简单。 jQuery提供了一个名为.append()的函数。

在以下示例中，我们将<div>附加到主体文档。

$('body').append('<div>');

就像我们用JavaScript演示的一样，上面的代码行返回相同的结果。它创建一个新元素，并将其插入到主体关闭标签之前。但是我们用更少的代码行做到了。

请记住，JavaScript不会物理上保存或更改文档。因此，当我们查看实际的文档源时，将找不到JavaScript生成的元素。

让我们进一步介绍这种方法。这次，我们将在其中插入带有文本的新元素。像以前一样，我们将看到如何仅使用JavaScript做到这一点。

为此，我们需要定义新元素和文本。由于我们将添加文本，因此可以在此示例中创建一个段落元素。

var p = document.createElement('p'); // create new paragraph element

接下来，我们需要定义文本。 JavaScript中的文本是使用.createTextNode()函数创建的。在此示例中，我们将文本值存储在名为txt的变量中。

var p = document.createElement('p'),
txt = document.createTextNode('This is the text in new element.');

此时，我们有两个变量，分别存储新元素和文本。但是，它们仍然分开并且可以独立存在。要将文本插入到我们创建的新元素中，我们可以运行相同的.appendChild()函数，如下所示。

p.appendChild(txt);

然后，再次运行.appendChild()将元素插入到主体文档中。

document.body.appendChild(p);

如果我们在浏览器中或通过开发人员工具看到它，则会得到：

在jQuery中，该过程得以简化。不必为文本和new元素分别定义两个变量，我们可以将它们与.append()函数一起编写，如下所示。

$('body').append('<p>This is the text in new element.<p>');

上面的代码本质上是做同样的事情，它将带有<p>元素的文本插入到主体中（在主体关闭标签之前）。

您会看到，使用带有.append()函数的jQuery，与使用纯JavaScript相比，我们能够以更苗条的方式动态添加新元素。但是当然，有时候使用JavaScript比加载jQuery库要好-这就是为什么我们还将向您展示如何做到这一点。

本文仅是开始。在下一部分中，我们将看到如何以更高级的方式插入元素。所以，请继续关注！

如果您对本文中的讨论有任何疑问，请随时在下面的评论框中添加。

翻译自: https://www.hongkiat.com/blog/jquery-insert-element-part1/

关注