jquery怎么添加和移除元素

添加元素的方法:1、用append()或prepend()在指定元素内部添加子元素;2、用after()或before()添加同级元素。移除方法:1、用remove()删除被选元素以及子元素;2、用empty()删除子元素,但保留被选元素。

jquery怎么添加和移除元素

本教程操作环境:windows7系统、jquery3.2.1版本、Dell G3电脑。

jQuery添加元素的四种方法:

1、append()在被选择元素的结尾添加内容。

使用 append( ) 方法向div元素内部的“末尾处”添加子元素。

语法:

  1. $(A).append(B)

登录后复制

表示往 A 内部的末尾处插入 B。

示例:

  1. nbsp;html>$(function () { $("#btn").click(function () { var newp = "

    一个新段落"; $("div").append(newp); }) })

    第一段文本

    第二段文本

    第三段文本

登录后复制

jquery怎么添加和移除元素

2、prepend()在被选择元素的开头添加内容。

 prepend( ) 方法可以向div元素内部的“开始处”添加子元素。

语法:

  1. $(A).prepend(B)

登录后复制

表示往 A 内部的开始处插入 B。

示例:

  1. $(function () {$("#btn").click(function () {var newp = "

    一个新段落

    ";$("div").prepend(newp);})})

登录后复制

jquery怎么添加和移除元素

3、after()选择某一个元素,并在该元素之后插入内容。

$(A).after(B)表示往 A 外部的后面插入 B。

示例:

  1. nbsp;html>$(document).ready(function() {$("button").click(function() {$("div").after("这是往div后面增加的新文本内容");});});
    这是一些文本。

    这是div块中的一个p段落。


登录后复制

jquery怎么添加和移除元素

4、before()选择某一个元素,并在该元素之插入内容。

$(A).before(B)表示往 A 外部的前面插入 B。

  1. nbsp;html>$(document).ready(function() {$("button").click(function() {$("div").before("这是往div前面增加的新文本内容");});});
    这是一些文本。

    这是div块中的一个p段落。


登录后复制

jquery怎么添加和移除元素

jQuery删除元素的方法2种方法:

使用remove()方法可以将被选元素以及子元素同时删除。

  1. nbsp;html>$(function () { $("#btn").click(function () { $("li:nth-child(4)").remove(); }) })

登录后复制HTMLCSSJavaScriptjQueryVue.js

jquery怎么添加和移除元素

使用empty()会将被选元素的子元素进行删除,不会删除被选元素。

  1. nbsp;html>$(function () { $("#btn").click(function () { $("ul li:nth-child(4)").empty(); }); })

登录后复制HTMLCSSJavaScriptjQueryVue.js

jquery怎么添加和移除元素

【推荐学习:jQuery视频教程、web前端视频】

以上就是jquery怎么添加和移除元素的详细内容,更多请关注【创想鸟】其它相关文章!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    什么是jquery异步加载

    2025-3-11 19:58:40

    编程技术

    jquery是什么的一个类库

    2025-3-11 19:58:48

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索