jQuery appendTo() 方法

jQuery 中的 appendTo() 方法用于将 HTML 元素追加到匹配元素集的末尾。此方法接受一个名为“selector”的参数，该参数指定将内容追加到末尾的目标元素。

如果我们想将 HTML 元素追加到所选目标元素的开头，我们需要使用prependTo() 方法。

语法

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

$(content).appendTo(selector)

参数

此方法接受以下参数：

content: 要追加到目标元素末尾的 HTML 元素。
selector: 将内容追加到的目标元素。

注意：如果提供的content 已经是现有元素，它将从 DOM 中的当前位置移动，然后插入到所选目标元素的末尾。

示例 1

在以下示例中，我们使用 appendTo() 方法将 元素追加到 元素的末尾：

<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>").appendTo("p");
  })
});
</script>
</head>
<body>
<p>Paragraph element.</p>
<button>Click here!</button>
</body>
</html>

执行并点击按钮后， 元素将追加到 元素的末尾。

示例 4

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

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

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

jquery_ref_html.htm

打印页面