JQuery中append()方法的使用

本文详细介绍了 jQuery 中 .append() 方法的使用方法及其应用场景。包括如何创建新内容并插入到现有元素中,以及如何从页面上的其他位置选择元素并将其移动或克隆到目标元素中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

.append()方法:将参数指定的内容插入匹配元素集合中每个元素的末尾

考虑下面代码:

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
  • 最常见的一种用法,创建新内容插入
$( ".inner" ).append( "<p>Test</p>" );

结果每个类属性是inner的div都插入了创建的内容

<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>
  </div>
</div>
  • 此外,还可以在页面上选择一个元素并将其插入另一个元素
$( ".container" ).append( $( "h2" ) );

如果以这种方式选择的元素被插入到DOM中的其他单个位置,它将被移动到目标(不被克隆),结果如下:h2标签内容移动到了类名为container的div里面

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

如果有多个目标元素,则将为每个目标创建插入元素的克隆副本(移动并克隆)

$( ".inner" ).append( $( "h2" ) );

结果:

<div class="container">
  <div class="inner">
  Hello
  <h2>Greetings</h2>
  </div>
  <div class="inner">
  Goodbye
  <h2>Greetings</h2>
  </div>
</div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值