.prependTo()| jqueryAPI 2.2 中文手册- AspRain.cn 致力于Web开发技术翻译整理

jQuery API 2.2.0

.prependTo()

分类:操纵 > DOM内部插入

返回: jQuery

.prependTo( target )

描述:把匹配的元素集合中的每个元素插入到目标的开头。

加入于: 1.0
.prependTo( target )
  • target
    类型:Selector or htmlString or Element or Array or jQuery
    一个选择器、元素、HTML字符串、元素的数组,或者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.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" ) );

如果以这种方式把一个元素选中并插入到DOM中另一个位置,它会被移到目标位置,而不是被克隆到目标位置:

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

然而,如果有超过一个目标元素,将创建插入元素的克隆副本,以用于每个目标,除了最后一个目标,而且会返回那个新集合(原来的元素加上克隆的元素)。

其它说明

  • 根据设计意图,任何接受一段HTML字符串的jQuery构造器或者jQuery方法——包括jQuery().append().after()等等——都会潜在地执行代码。这可能发生脚本标签注入,或者使用HTML的元素属性执行代码(例如,<img onload="">。)千万不要用这些方法来插入从不可信任的来源获得的字符串,比如说URL查询参数、cookies,或者表单输入。这样做还可能引入跨站脚本(XSS)漏洞。在往document添加内容之前要删除或转义一切的用户输入。

示例

把所有的span插入到带有ID为“foo”的元素的开头(查看prepend()的文档以获得更多的示例)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prependTo demo</title>
  <style>
  div {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div id="foo">FOO!</div>
<span>I have something to say... </span>
 
<script>
$( "span" ).prependTo( "#foo" );
</script>
 
</body>
</html>

演示结果

如果网页上不能运行示例,请点击http://www.asprain.cn/jQueryAPI/prependto.htm查看示例。

如果你觉得本文档对你有用,欢迎给翻译作者支付宝打赏,支持翻译作者源源不断翻译更多有用的技术文档。