当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .prependTo()用法及代码示例


用法 
.prependTo( target ) => jQuery

说明：将匹配元素集中的每个元素插入到目标的开头。

  • 添加的版本：1.0.prependTo( target )

    • target
      类型：Selector 或 htmlString 或 Element 或 Array 或 jQuery
      选择器、元素、HTML 字符串、元素数组或 jQuery 对象；匹配的元素集将插入此参数指定的元素的开头。

.prepend() 和 .prependTo() 方法执行相同的任务。主要区别在于syntax-specifically，内容和目标的放置。对于 .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> 元素都会获得以下新内容：

<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()、.append()、.after() 等)都可能执行代码。这可以通过注入脚本标签或使用执行代码的 HTML 属性(例如，<img onload="">)来实现。不要使用这些方法插入从 URL 查询参数、cookie 或表单输入等不受信任的来源获得的字符串。这样做会引入cross-site-scripting (XSS) 漏洞。在向文档添加内容之前删除或转义任何用户输入。
  • jQuery 不正式支持 SVG。在 SVG 文档上使用 jQuery 方法，除非为该方法明确记录，否则可能会导致意外行为。从 jQuery 3.0 开始支持 SVG 的方法示例是 addClass 和 removeClass 。

例子：

将所有跨度添加到 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-3.5.0.js"></script>
</head>
<body>
 
<div id="foo">FOO!</div>
<span>I have something to say... </span>
 
<script>
$( "span" ).prependTo( "#foo" );
</script>
 
</body>
</html>

演示：

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .prependTo()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。