jQuery API .append()

最新推荐文章于 2021-03-15 20:00:44 发布

依然那么楞

最新推荐文章于 2021-03-15 20:00:44 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery api append

本文链接：https://blog.youkuaiyun.com/ling811/article/details/17685051

本文介绍了 jQuery 中的 .append() 方法，详细解释了如何使用此方法在匹配元素的末尾插入新的内容。包括字符串、DOM元素、jQuery 对象等多种类型的参数示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.append()

.append(content[,content])

描述: 在每个匹配元素里面的末尾处插入参数内容。

content

类型: String, Element, jQuery

DOM 元素，DOM元素数组，HTML字符串，或者jQuery对象，用来插在每个匹配元素里面的末尾。
content

类型: String, Element, Array, jQuery

一个或多个DOM元素，元素数组，HTML字符串，或jQuery对象插入到每个匹配元素的末尾。

.append(function(index,html))

function(index, html)

类型: Function()

一个返回HTML字符串，DOM元素，jQuery对象的函数，该字符串用来插入到匹配元素的末尾。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。在函数中 this指向元素集合中的当前元素

.append()函数将特定内容插入到每个匹配元素里面的最后面，作为它的最后一个子元素（last child）, (如果要作为第一个子元素（first child）, 用.prepend()).

.append() 和.appendTo()实现同样的功能。主要的不同是语法——内容和目标的位置不同。对于.append(), 选择器表达式在函数的前面，参数是将要插入的内容。对于.appendTo()刚好相反，内容在方法前面，无论是一个选择器表达式或创建作为标记上的标记，它都将被插入到目标容器的末尾。

例子:

Example: 在所有的段落内的尾部，追加一些 HTML。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.10.2.js"></script>
 <style>
  p { background:yellow; }
</style>
</head>

<body>
<p>测试append：</p>
<script>
  $("p").append("<strong>用append添加的文本！</strong>");
</script>
</body>
</html>

效果图：

Example: 在所有的段落内的尾部，追加一个元素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.10.2.js"></script>
 <style>
  p { background:yellow; }
</style>
</head>

<body>
<p>测试append：</p>
<script>
  $("p").append(document.createTextNode("用document.createTextNode追加的元素！"));
</script>
</body>
</html>

效果图：

Example: 在所有的段落内的尾部，追加一个 jQuery 对象（类似于一个 DOM 元素数组）。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.10.2.js"></script>
 <style>
  p { background:yellow; }
</style>
</head>

<body>
 <strong>用jquery对象追加的</strong>
<p>测试append：</p>
<script>
$("p").append( $("strong") );
</script>
</body>
</html>