jQuery添加新元素/内容

最新推荐文章于 2023-06-09 17:40:08 发布

Presbyterian

最新推荐文章于 2023-06-09 17:40:08 发布

阅读量2.6k

点赞数 1

分类专栏： js常用的方法文章标签： jquery append 结构

本文链接：https://blog.csdn.net/weixin_38023551/article/details/78340395

版权

js常用的方法专栏收录该内容

31 篇文章 2 订阅

订阅专栏

整理了一下jq添加元素/HTML的一些操作，效果图见下。

结构插入
内部插入
append() - 在被选元素的结尾插入内容
appendTo() -方法在被选元素的结尾（仍然在内部）插入指定内容。
prepend() - 在被选元素的开头插入内容
prependTo()- 方法在被选元素的开头（仍位于内部）插入指定内容。
外部插入
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
insertAfter(content)-把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
insertBefore(content)-把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
append,prepend:添加到子元素
before，after：作为兄弟元素添加

HTML结构

<div id="box" style="border: 1px solid #f00">
    <h2>我是在id为box的div的h2标签；id为box的div有一个红色边框</h2>
</div>

js结构

    $('#box').append("<p>我是append进来的1</p>")
    $('#box').append("<p>我是append进来的2</p>")
    $('#box').append("<p>我是append进来的3</p>")

    $("<p>我是appendTo进来的1</p>").appendTo('#box')
    $("<p>我是appendTo进来的2</p>").appendTo('#box')
    $("<p>我是appendTo进来的3</p>").appendTo('#box')

    $("<p>我是prependTo进来的1</p>").prependTo('#box')
    $("<p>我是prependTo进来的2</p>").prependTo('#box')
    $("<p>我是prependTo进来的3</p>").prependTo('#box')

    $('#box').prepend("<p>我是prepend进来的1</p>")
    $('#box').prepend("<p>我是prepend进来的2</p>")
    $('#box').prepend("<p>我是prepend进来的3</p>")

    $('#box').after("<p>我是after进来的1</p>")
    $('#box').after("<p>我是after进来的2</p>")
    $('#box').after("<p>我是after进来的3</p>")

    $('#box').before("<p>我是before进来的1</p>")
    $('#box').before("<p>我是before进来的2</p>")
    $('#box').before("<p>我是before进来的3</p>")

    $("<p>我是insertBefore进来的1</p>").insertBefore("#box");
    $("<p>我是insertBefore进来的2</p>").insertBefore("#box");
    $("<p>我是insertBefore进来的3</p>").insertBefore("#box");

    $("<p>我是insertAfter进来的1</p>").insertAfter("#box");
    $("<p>我是insertAfter进来的2</p>").insertAfter("#box");
    $("<p>我是insertAfter进来的3</p>").insertAfter("#box");