了解如何在jQuery中创建元素

创建一个新元素是您可以使用jQuery JavaScript库完成的最基本的任务之一。使用jQuery,此任务比文档对象模型(DOM)的等效方法简单得多。您也会发现,使用jQuery越多,它越灵活,更具表现力。

为了达到目的,您需要能够将元素添加到网页中。了解如何使用jQuery添加新列表项或用新内容替换段落。

什么是jQuery?

jQuery库是JavaScript代码的集合,其主要目的是两个:

  • 它简化了常见的JavaScript操作。
  • 它处理各种浏览器之间的跨兼容性JavaScript问题。

第二个目标是解决错误,但同时也解决了浏览器之间的实现差异。随着浏览器的不断改进,这两个目标都不再像以前那样必要。但是jQuery仍然可以是一个有价值的工具。

什么是元素?

元素有时称为标签。尽管两者经常互换使用,但还是有细微的差别。标签是指您包含在HTML文件中以标记文本内容的文字<p></ p> 。元素是表示标记文本的幕后对象。可以将元素视为与HTML标签相对应的DOM

如何使用jQuery创建新元素

像大多数jQuery操作一样,创建元素以美元函数$()开始。这是核心jQuery()函数的快捷方式。此功能具有三个不同的用途,它是:

  • 匹配元素,通常是文档中已经存在的元素
  • 创建新元素
  • DOM准备就绪时运行回调函数

当传递包含HTML作为第一个参数的字符串时,此函数将创建一个新元素:

 $("<a>")

这将返回一个特殊的jQuery对象,其中包含元素的集合。在这种情况下,只有一个对象代表我们刚刚创建的“ a”元素。

该字符串必须看起来像HTML,以区分此操作和匹配的元素。实际上,这意味着字符串必须以<开头。您不能使用此方法向文档中添加纯文本。

重要的是要了解这不会将元素添加到文档中,而只会创建一个可供您添加的新元素。元素是“未附加的”,占用了内存,但实际上并不是最终页面的一部分,但是。

添加更复杂的HTML

美元函数实际上可以创建多个元素。实际上,它可以构建您想要的任何HTML元素树:

 $("<ul><li>one</li><li>two</li><li>three</li></ul>")

您还可以使用以下格式来创建具有属性的元素:

 $('<img src="photo.jpg" alt="my hometown" />')

如何在新元素上设置属性

您可以创建一个新的jQuery元素并设置其属性,而不必自己构建完整的HTML字符串。如果要动态生成属性值,这将很有用。例如:

 photo = new Date().getHours() > 12 ? "afternoon.jpg" : "morning.jpg";
$("<img>", { src: photo });

如何添加元素

创建新元素后,可以通过几种不同方式将其添加到文档中。 jQuery文档将这些方法收集在 “操作”类别下

添加为现有元素的子代

$("body").append($("<p>Hello, world</p>"));
$(document.body).append($el);

例如,您可以使用此方法在列表末尾添加新的列表项。

将其添加为现有元素的同级

$("p.last").after("<p>A new paragraph</p>")
$("ul li:first").before("<li>new item</li>")

例如,如果您想在其他两个段落中间添加一个新段落,则这是一个不错的选择。

替换现有元素

您可以使用replaceWith()方法将现有元素替换为新创建的元素:

 $('#old').replaceWith("<p>New paragraph</p>");

环绕现有元素

这是一种非常罕见的用例,但是您可能希望将现有元素包含在一个新元素中。例如,您可能有一个要包装在pre中代码元素:

 $('code#n1').wrap("<pre>")

访问您创建的元素

$()函数返回一个jQuery对象。这对于后续操作很有用:

 $el = $("p");
$('body').append($el);

请注意,按照惯例,jQuery程序员经常用前导美元符号命名jQuery变量。这只是一个命名方案,与$()函数没有直接关系。

使用jQuery创建元素

尽管您可以使用本机JavaScript函数来操作DOM,但是jQuery使操作起来更加容易。很好地了解DOM仍然非常有用,但是jQuery使使用它变得更加愉快。