jQuery append()方法如何使用

jQuery的append()方法用于向指定元素的结尾添加内容。它可以将文本、HTML、元素或一组元素添加到目标元素的结尾处。

该方法可以接受多个参数，每个参数都可以是文本、HTML、元素或元素数组的组合。

语法：

$(selector).append(content,function(index,html))

其中，content参数可以是字符串、HTML、DOM元素、文本和jQuery对象。

除了使用append()方法，还可以使用appendTo()方法将元素添加到目标元素的结尾。

语法：

$(content).appendTo(selector);

下面是几个实例来说明append()方法的用法和效果。

1、向元素添加一个新文本节点。

$("#myDiv").append("Hello World!");

可以向id为“myDiv”的元素添加一个新文本节点，并将“Hello World！”添加到元素的结尾处。

2、向元素添加一个HTML元素。

$("#myDiv").append("<p>Hello World!</p>");

该代码将创建一个新的段落，并将其添加到id为“myDiv”的元素的结尾处。段落将包含文本“Hello World！”。

3、向元素添加一个jQuery对象。

var newElement = $("<p>").text("Hello World!");
$("#myDiv").append(newElement);

该代码将创建一个新的段落，并将其添加到id为“myDiv”的元素的结尾处。段落将包含文本“Hello World！”。

4、向元素添加多个元素。

var newElements = $("<p>").text("Hello World!").add("<h2>Goodbye World!</h2>");
$("#myDiv").append(newElements);

该代码将创建两个新元素（一个段落和一个标题），并将它们添加到id为“myDiv”的元素的结尾处。两个元素将包含文本“Hello World！”和“Goodbye World！”。

在这个例子中，add()方法用于将两个不同的元素组合成一个jQuery对象。

5、使用回调函数修改插入的内容。

$("#myDiv").append(function(index, html) {
  return "<p>" + (index + 1) + " - " + html + "</p>";
});

这将向id为“myDiv”的元素添加每个元素的索引和它原来的内容。

在回调函数中，“index”参数表示正在插入的元素的索引，而“html”参数表示正在插入的元素的原始内容。 通过使用这些变量，您可以自定义要插入的内容。

总之，jQuery的append()方法可以将文本，HTML，元素或元素数组添加到目标元素的结尾处。它非常适合需要往页面中动态添加内容的情况下使用，可以轻松地实现动态、交互式网页。