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库要好-这就是为什么我们还将向您展示如何做到这一点。
