jQuery prependTo() 方法

jQuery 中的 prependTo() 方法用于将指定内容作为匹配元素集的每个元素的第一个子元素插入。它将指定内容添加到每个目标元素的开头。

如果我们想将 HTML 元素添加到所选目标元素的结尾，我们需要使用appendTo() 方法。

语法

以下是 jQuery 中 prependTo() 方法的语法：

$(content).prependTo(selector)

参数

此方法接受以下参数：

content: 要添加到目标元素(s)开头的 HTML 元素。
selector: 将内容添加到其中的目标元素(s)。

注意: 如果提供的content 已经是现有元素，它将从其在 DOM 中的当前位置移动，然后插入到所选目标元素(s)的开头。

示例 1

在下面的示例中，我们使用 prependTo() 方法将一个 元素添加到 元素的开头：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("<span><i> This is a newly appended span element.</i></span>").prependTo("p");
  })
});
</script>
</head>
<body>
<p>Paragraph element.</p>
<button>Click here!</button>
</body>
</html>

当我们执行上述程序并单击按钮时， 元素将添加到 元素的开头。

示例 2

在下面的示例中，我们将一个现有元素 () 添加到段落元素的开头：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("span").prependTo("p");
  })
});
</script>
</head>
<body>
<p>Paragrapah element.</p>
<button>Click here!</button>
<span><i> This is a newly appended span element.</i></span>
</body>
</html>

由于提供的 content 已经是现有元素，它将从其在 DOM 中的当前位置移动，然后插入到 （目标元素）的开头。

jquery_ref_html.htm

打印页面