概述 .prependTo( target )
返回值:jQuery
描述:将所有元素插入到目标前面(元素内)。
.prepend()
和.prependTo()
实现同样的功能,主要的不同是语法,插入的内容和目标的位置不同。
对于 .prepend()
而言,选择器表达式写在方法的前面,作为待插入内容的容器,将要被插入的内容作为方法的参数。而 .prependTo()
正好相反,将要被插入的内容写在方法的前面,可以是选择器表达式或动态创建的标记,待插入内容的容器作为参数。
请看下面的HTML:
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
我们可以创建内容然后同时插入到好几个元素里面:
$('<p>Test</p>').prependTo('.inner');
每个 <div class="inner">
元素得到新内容:
<h2>Greetings</h2>
<div class="container">
<div class="inner">
<p>Test</p>
Hello
</div>
<div class="inner">
<p>Test</p>
Goodbye
</div>
</div>
我们也可以在页面上选择一个元素然后插在另一个元素里面:
$('h2').prependTo($('.container'));
如果一个被选中的元素被插入到另外一个地方,这是移动而不是复制:
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
然而,如果有多个目标元素,插入元素的克隆副本被创建到每个目标元素,而不是只插入到最后一个目标元素
<img onload="">
)。不要使用这些方法来插入来自不受信任来源的内容,如网址查询参数,Cookie或表单输入获得的字符串。这样做可能会引起跨站点脚本(XSS)漏洞。将内容添加到文档之前删除或避免用户任何输入内容。
addClass
和 removeClass
。
示例
把所有段落追加到ID值为foo的元素中。
<p>I would like to say: </p><div id="foo"></div>
$("p").prependTo("#foo");
<div id="foo"><p>I would like to say: </p></div>