深入学习jquery源码之append()和prepend()
append(content|fn)
概述
向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。
参数
content String, Element, jQuery
要追加到目标中的内容
function(index, html) Function
返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。
向所有段落中追加一些HTML标记。
I would like to say:
$("p").append("Hello");
[ I would like to say: Hello
]
appendTo(content)
概述
把所有匹配的元素追加到另一个指定的元素元素集合中。
实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。
在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,返回值是所有被追加的内容,而不仅仅是先前所选中的元素。所以,要选择先前选中的元素,需要使用end()方法,参见例二。
参数
content String
用于被追加的内容
把所有段落追加到ID值为foo的元素中。
I would like to say:
$("p").appendTo("div");
I would like to say:
I would like to say:
新建段落追加div中并加上一个class
$("")
.appendTo("div")
.addClass("test")
.end()
.addClass("test2");
prepend(content)
概述
向每个匹配的元素内部前置内容。
这是向所有匹配元素内部的开始处插入内容的最佳方式。
参数
content String, Element, jQuery
要插入到目标元素内部前端的内容
function(index, html) Function
返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。
向所有段落中前置一些HTML标记代码。
I would like to say:
$("p").prepend("Hello");
[ HelloI would like to say:
]
将一个DOM元素前置入所有段落
I would like to say:
I would like to say:
Hello
Good Bye
$("p").prepend( $(".foo")[0] );
HelloI would like to say:
HelloI would like to say:
Good Bye
向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。
I would like to say:
Hello
$("p").prepend( $("b") );
HelloI would like to say:
prependTo(content)
概述
把所有匹配的元素前置到另一个、指定的元素元素集合中。
实际上,使用这个方法是颠倒了常规的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。
在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,要选择先前选中的元素,需要使用end()方法,参见 appendTo 方法的例二。
参数
content String
用于匹配元素的jQuery表达式
把所有段落追加到ID值为foo的元素中。
I would like to say:
$("p").prependTo("#foo");
I would like to say:
jquery源码
jQuery.each({
appendTo: "append",
prependTo: "prepend"
}, function (name, original) {
jQuery.fn[name] = function (selector) {
var elems,
i = 0,
ret = [],
insert = jQuery(selector),
last = insert.length - 1;
for (; i 1 && typeof value === "string" &&
!support.checkClone && rchecked.test(value))) {
return this.each(function (index) {
var self = set.eq(index);
if (isFunction) {
args[0] = value.call(this, index, self.html());
}
self.domManip(args, callback);
});
}
if (l) {
fragment = jQuery.buildFragment(args, this[0].ownerDocument, false, this);
first = fragment.firstChild;
if (fragment.childNodes.length === 1) {
fragment = first;
}
if (first) {
scripts = jQuery.map(getAll(fragment, "script"), disableScript);
hasScripts = scripts.length;
// Use the original fragment for the last item instead of the first because it can end up
// being emptied incorrectly in certain situations (#8070).
for (; i < l; i++) {
node = fragment;
if (i !== iNoClone) {
node = jQuery.clone(node, true, true);
// Keep references to cloned scripts for later restoration
if (hasScripts) {
jQuery.merge(scripts, getAll(node, "script"));
}
}
callback.call(this[i], node, i);
}
if (hasScripts) {
doc = scripts[scripts.length - 1].ownerDocument;
// Reenable scripts
jQuery.map(scripts, restoreScript);
// Evaluate executable scripts on first document insertion
for (i = 0; i < hasScripts; i++) {
node = scripts[i];
if (rscriptType.test(node.type || "") &&
!jQuery._data(node, "globalEval") && jQuery.contains(doc, node)) {
if (node.src) {
// Optional AJAX dependency, but won't run scripts if not present
if (jQuery._evalUrl) {
jQuery._evalUrl(node.src);
}
} else {
jQuery.globalEval((node.text || node.textContent || node.innerHTML || "").replace(rcleanScript, ""));
}
}
}
}
// Fix #11809: Avoid leaking memory
fragment = first = null;
}
}
return this;
}
});