JQuery中append()方法的使用

.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>

JQuery中append()方法的使用相关推荐

JS -- 对于JQuery中 append 方法的理解
<div class="titleDiv">A</div> click事件{$(".titleDiv").append('<spa ...
jQuery中append、insertBefore、after与insertAfter方法注意事项
jQuery中append.appendTo.prepend.prependTo.before.insertBefore.after与insertAfter方法注意事项这里列的是针对初学jQuery ...
jQuery中append()和appendTo()的区别
[前言] 简单总结下jQuery中append()和appendTo()的区别 [主体] 1.简单理解 (插入对象不同) append()前面是被插入的对象,后面是要在对象内插入的元素内容 appen ...
jquery的append方法无效
css代码: AAAA BBBB(title="hello") CCCC(class="box") DDDD(title="hello") ...
jquery中not方法失效的解决方案
jquery中not方法失效的解决方案参考文章: (1)jquery中not方法失效的解决方案 (2)https://www.cnblogs.com/xxqxxq/p/9269669.html 备忘 ...
jQuery中slice()方法用法实例
本文实例讲述了jQuery中slice()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以选取匹配元素集的子集. 语法结构: 复制代码代码如下: $(selector).slice(sta ...
关于Jquery中ajax方法data参数用法的总结
关于Jquery中ajax方法data参数用法的总结 jquery手册描述: 示例: $.ajax({type: "POST",url: "some.php", ...
jquery中Live方法不可用，Jquery中Live方法失效
jquery中Live方法不可用,Jquery中Live方法失效 >>>>>>>>>>>>>>>>> ...
jquery中AddClass()方法问题
jquery中AddClass()方法要求对应的元素中不能不能有style属性设置,否则无法设置新css显示类,例如> $("img").hover(function () ...

JQuery中append()方法的使用

JQuery中append()方法的使用相关推荐

最新文章

热门文章