jQuery 使用 append() 方法如何组装一个

ul> 元素

在本文中，我们将介绍使用 jQuery 的 append() 方法来组装一个

ul> 元素。jQuery 是一个快速、简洁的 JavaScript 库，广泛用于前端开发中，可以方便地操作 DOM 元素，以及进行事件处理、动画效果等操作。

阅读更多：jQuery 教程

什么是 append() 方法？

append() 方法是 jQuery 提供的一个用于在指定元素的末尾插入内容的方法。该方法可以将指定的 HTML 内容或 DOM 元素追加到目标元素的末尾。

使用 append() 方法创建一个

ul> 元素

下面是使用 append() 方法创建一个

ul> 元素的示例：

// 创建一个 <ul> 元素
var ulElement =  $("<ul>"); // 使用 append() 方法向 <ul> 元素中追加 <li> 元素 ulElement.append("<li>Item 1</li>"); ulElement.append("<li>Item 2</li>"); ulElement.append("<li>Item 3</li>"); // 将 <ul> 元素插入到指定的目标元素中$ ("body").append(ulElement);

在上述示例中，我们首先使用 $("<ul>") 创建了一个

ul> 元素。然后使用 append() 方法多次向

ul> 元素中追加了三个

元素。最后，使用 $("body").append(ulElement) 将整个

ul> 元素插入到了 <body> 元素中。

通过以上代码执行后，页面中会动态生成一个包含三个项目的列表，如下所示：

Item 1
Item 2
Item 3

使用 append() 方法动态添加列表项

除了在创建

ul> 元素时使用 append() 方法插入列表项外，我们还可以在已存在的

ul> 元素中动态添加更多的列表项。

下面是一个示例，展示了如何使用 append() 方法动态地向已存在的

ul> 元素中添加列表项：

// 在页面加载完成后执行以下代码
 $(document).ready(function() { // 动态添加列表项的函数 function addListItem(item) { // 在 <ul> 元素的末尾追加一个新的列表项$ ("ul").append("<li>" + item + "</li>");
  }

  // 调用 addListItem() 函数添加三个列表项
  addListItem("Apple");
  addListItem("Banana");
  addListItem("Orange");
});

在上述示例中，我们首先定义了一个 addListItem(item) 函数，该函数接受一个参数 item。在函数体内，使用 append() 方法将参数 item 插入到现有的

ul> 元素中作为一个新的列表项。

在页面加载完成后，我们调用 addListItem() 函数三次，分别传入了三个不同的水果名称。执行这段代码后，页面中已存在的

ul> 元素将动态地添加了三个新的列表项：