jQuery 文档操作 - appendTo() 方法

最新推荐文章于 2022-05-16 21:21:17 发布

pursuer211

最新推荐文章于 2022-05-16 21:21:17 发布

阅读量908

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/pursuer211/article/details/23395339

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、语法

语法

$(content).appendTo(selector)

参数	描述
content	必需。规定要插入的内容（可包含 HTML 标签）。
selector	必需。规定把内容追加到哪个元素上。

先看一个例子：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('<p/>', {
    'class': 'myclass',
    'id': 'myid',
    html: 'appendTo例子'
  }).appendTo('h1');
});
</script>
</head>
<body>
</body>
</html>

该代码运行的结果是：

查看页面元素：

通过上面的截图，我们发现<p class="myclass" id="myid">appendTo例子</p>被加到<h1></h1>元素中了，appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。

2、代码解释

如下代码解释：

  $('<p/>', {
    'class': 'myclass',
    'id': 'myid',
    html: 'appendTo例子'
  })

构建一个p元素，并增加class、id属性，以及元素之间的内容。

3、append() 和 appendTo()区别

append() 方法在被选元素的结尾（仍然在内部）插入指定内容。

语法

$(selector).append(content)

参数	描述
content	必需。规定要插入的内容（可包含 HTML 标签）。

使用函数来附加内容

使用函数在指定元素的结尾插入内容。

语法

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

亲自试一试

参数	描述
function(index,html)	必需。规定返回待插入内容的函数。 index - 可选。接收选择器的 index 位置。 html - 可选。接收选择器的当前 HTML。

参数

描述

function(index,html)

必需。规定返回待插入内容的函数。