jQuery——append等文档处理方法

最新推荐文章于 2021-06-12 22:38:41 发布

simon_dg

最新推荐文章于 2021-06-12 22:38:41 发布

阅读量500

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jquery append 文档

本文链接：https://blog.youkuaiyun.com/simon_dg/article/details/78252124

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了jQuery中元素操作的方法，包括内部插入、外部插入、包裹标签、替换、删除及复制等核心功能。通过实例展示了如何利用这些方法实现网页元素的动态管理和布局调整。

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

appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法返回值是所有被追加的内容，要选择先前选中的元素，需要使用end()方法

内部插入：

append	A.append(B)，把B加入A的内部的后面。如果B在页面上存在，则删除原来位置的B
appendTo	B.appendTo(A),同append，只是书写顺序不一样
prepend	A.prepend(B),把B加入A的内部的前面。如果B在页面上存在，则删除原来位置的B
prependTo	B.prependTo(A),同prepend

boan

外部插入：

before	A.before(B)，把B加入A的外部的后面。如果B在页面上存在，则删除原来位置的B
insertBefore	B.insertBefore(A),同before，只是书写顺序不一样
after	A.after(B),把B加入A的外部的前面。如果B在页面上存在，则删除原来位置的B
insertAfter	B.insertAfter(A),同after

包裹标签：

wrap	A.wrap(B)，用B包裹A
unwrap	A.unwrap(),删除A的外层包裹标签
wrapAll	A.wrapAll(B),把所有的A集中起来，用B包裹。原来位置的A删除
wrapInner	A.wrapInner(B),用A包裹B

替换：

replaceWith	A.replaceWith(B),用B代替A，B原位置不变
replaceAll	B.replaceAll(A),用B代替A，B原位置不变

删除：

empty	A.empty(),删除A的内容留骨架（空的A标签）
remove	A.remove(B),B为条件（可选）。移除，骨架都没有了
detach	A.detach(B),B为条件（可选）。移除，骨架都没有了
remove这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。	detach与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来

    <div id="first">我是第一</div>
    <div id="second">我是第二</div>
    <button id="btd">删除第一个div</button>
    <button id="btn">查看删除操作后div的数量</button>

   $("#btd").click(function() {
            var a = $("div");
            a.remove("#first");
            $("#btn").click(function() {
                alert(a.length);// 2
            })
        })

复制：

clone

A.empty()克隆A，后面一般都要跟prepend等文档操作

  $("button").click(function(){
  $(this).clone(true).insertAfter(this);
});//布尔值为赋值过后的元素是否还是满足复制功能。默认值为false，不满足