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

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


用法 
.prepend( content [, content ] ) => jQuery

说明：将由参数指定的内容插入到匹配元素集中每个元素的开头。

  • 添加的版本：1.0.prepend( content [, content ] )

    • content
      类型：htmlString 或 Element 或 Text 或 Array 或 jQuery
      DOM 元素、文本节点、元素数组和文本节点、HTML 字符串或要插入到匹配元素集中每个元素开头的 jQuery 对象。
    • content
      类型：htmlString 或 Element 或 Text 或 Array 或 jQuery
      一个或多个附加 DOM 元素、文本节点、元素数组和文本节点、HTML 字符串或 jQuery 对象，以插入到匹配元素集中每个元素的开头。

  • 添加的版本：1.4.prepend( function )

    • function
      类型：Function (Integer elementOfArray, String html) => htmlString 或 Element 或 Text 或 jQuery
      一个返回 HTML 字符串、DOM 元素、文本节点或 jQuery 对象的函数，以插入到匹配元素集中每个元素的开头。接收集合中元素的索引位置和元素的旧 HTML 值作为参数。在函数中，this 指的是集合中的当前元素。

.prepend() 方法将指定的内容插入为 jQuery 集合中每个元素的第一个子元素(要将其插入为 last 子元素，请使用 .append() )。

.prepend() 和 .prependTo() 方法执行相同的任务。主要区别在于语法——特别是内容和目标的位置。对于 .prepend() ，方法前面的选择器表达式是插入内容的容器。另一方面，对于 .prependTo() ，内容在方法之前，作为选择器表达式或作为动态创建的标记，它被插入到目标容器中。

考虑以下 HTML：

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

您可以创建内容并一次将其插入到多个元素中：

$( ".inner" ).prepend( "<p>Test</p>" );

每个 <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>

您还可以选择页面上的一个元素并将其插入另一个元素：

$( ".container" ).prepend( $( "h2" ) );

如果以这种方式选择的 a single element 被插入到 DOM 中其他位置的单个位置，它将被移动到目标 (not cloned) 中：

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

重要提示：但是，如果有多个目标元素，则将为每个目标创建插入元素的克隆副本，最后一个除外。

附加参数

与 .append() 和 .before() 等其他内容添加方法类似，.prepend() 也支持传入多个参数作为输入。支持的输入包括 DOM 元素、jQuery 对象、HTML 字符串和 DOM 元素数组。

例如，以下将插入两个新的 <div> 和一个现有的 <div> 作为正文的前三个子节点：

var $newdiv1 = $( "<div id='object1'></div>"),
  newdiv2 = document.createElement( "div" ),
  existingdiv1 = document.getElementById( "foo" );
 
$( "body" ).prepend( $newdiv1, [ newdiv2, existingdiv1 ] );

由于 .prepend() 可以接受任意数量的附加参数，因此可以通过将三个 <div> 作为三个单独的参数传入来实现相同的结果，如下所示： $( "body" ).prepend( $newdiv1, newdiv2, existingdiv1 ) 。参数的类型和数量在很大程度上取决于您如何收集代码中的元素。

其他注意事项：

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

例子：

为所有段落添加一些 HTML。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prepend demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>there, friend!</p>
<p>amigo!</p>
 
<script>
$( "p" ).prepend( "<b>Hello </b>" );
</script>
 
</body>
</html>

演示：

为所有段落添加一个 DOM 元素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prepend demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>is what I'd say</p>
<p>is what I said</p>
 
<script>
$( "p" ).prepend( document.createTextNode( "Hello " ) );
</script>
 
</body>
</html>

演示：

为所有段落添加一个 jQuery 对象(类似于 DOM 元素数组)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prepend demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p> is what was said.</p><b>Hello</b>
 
<script>
$( "p" ).prepend( $( "b" ) );
</script>
 
</body>
</html>

演示：

相关用法


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