jquery中append()与appendto()用法分析
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery中append()与appendto()用法分析相关的知识，希望对你有一定的参考价值。
参考技术A 本文实例分析了jquery中append()与appendto()的用法。分享给大家供大家参考。具体分析如下：在jQuery的文档操作方法中，append()和appentto()方法执行的任务相同，但是两者也有区别。
1、append()方法：在被选元素的结尾（但仍在元素内部）插入指定的内容。
a、语法：复制代码
代码如下:$(selector).append(content);其中，参数content是必需的，指定要附加的内容。
b、append能够使用函数给被选元素附加内容，语法为：复制代码
代码如下:$(selector).append(function(index,html));其中，function()是必需的，参数index和html都是可选的。index表示接收选择器的index位置，html表示接收选择器的当前html。
例子：
复制代码
代码如下:<html>
<head>
<script
type="text/javascript"
src="/jquery/jquery.js"></script>
<script
type="text/javascript">
$(document).ready(function()
$("button").click(function()
$("p").append("
<b>Hello
jQuery!</b>");
);
);
</script>
</head>
<body>
<p>This
is
a
paragraph.</p>
<p>This
is
another
paragraph.</p>
<button>在每个
p
元素的结尾添加内容</button>
</body>
</html>
运行结果如下：
This
is
a
paragraph.
Hello
jQuery!
This
is
another
paragraph.
Hello
jQuery!
2、appendto()方法：在被选元素的结尾（但仍在元素的内部）插入指定的内容。但不能使用函数来附加内容。
语法：复制代码
代码如下:$(content).appendto(selector);
例子：
复制代码
代码如下:<html>
<head>
<script
type="text/javascript"
src="/jquery/jquery.js"></script>
<script
type="text/javascript">
$(document).ready(function()
$("button").click(function()
$("<b>
Hello
jQuery!</b>").appendTo("p");
);
);
</script>
</head>
<body>
<p>This
is
a
paragraph.</p>
<p>This
is
another
paragraph.</p>
<button>在每个
p
元素的结尾添加内容</button>
</body>
</html>
运行结果如下：
This
is
a
paragraph.
Hello
jQuery!
This
is
another
paragraph.
Hello
jQuery!
希望本文所述对大家的jQuery程序设计有所帮助。
Jquery - 追加vs AppendTo
有人可以解释一下为什么常规追加循环比AppendTo更好吗？
//Using Regular Append
var ul = $("<ul></ul>");
$("#myDiv").empty().append(ul)
$.each(movies, function (count, item) {
var id = 'li_' + count;
ul.append('<li id=' + id + '>' + item + '</li>');
$('#' + id).click(function () { });
});
//Using AppendTo
var div = $("#myDiv").empty(),
ul = $("<ul></ul>").appendTo(div);
$.each(movies, function (count, item) {
$('<li>' + item + '</li>').click(function () { }).appendTo(ul);
});
答案
append vs appendTo performance（jQuery 1.9.1）
从jQuery代码中可以看出，appendTo具有更好性能的原因之一是因为appendTo实现比常规追加稍微复杂一些。
虽然append大致取决于native appendChild函数，但appendTo是一个需要由代码处理的jQuery补充（appendTo中有额外的循环，它对元素进行操作并实际调用.append）。虽然性能影响不大（如果你只是比较最简单的用法，比如在这个例子中：http://jsperf.com/sdp-jquery-append/5），它肯定是要记住的。
至于链接的jsperf中标记为“Better”的示例：
它表现得更好，因为在最快的版本中（在你链接到的jsperf中）你只需要收集要附加的html，而不是在每次迭代时实际附加它。
它节省了浏览器资源，因为它不必在每次迭代时重排和重新绘制内容。
另一答案
append(content)将内容添加到每个匹配元素的内部。
appendTo(selector)将所有匹配的元素附加到另一个指定的元素集。
以上是关于jquery中append()与appendto()用法分析的主要内容，如果未能解决你的问题，请参考以下文章