首页
未解之谜
天体物理
科技前沿
下载中心
游戏天地
[FW:AdTitle]
首页 >> 科技前沿 >> 正文

Jquery添加元素(append,prepend,after,before四种方法区别对比)2018-12-13|阅读:268 次|出处:|编辑:管理员

  • query是一个平常比较喜欢用的js框架,因为上手比较简单吧,哈哈,下面呢,就介绍一下Jquery中如何添加元素。jquery添加元素一共有四个语句,分别是append(),prepend(),after(),before()


        append的用法
        这个方法的意思是在选中目标的结尾插入内容。举个例子:

    <p>hello</p>
    如果执行下面这个插入语句,上面的语句会变成什么样子
    $("p").append("<b>world</b>")

    执行了这个插入语句会变成
    <p>hello<b>world</b></p>

    也就是说,在插入的结尾标签前插入此内容。

        prepend的用法。
        顾名思义,跟上面一种用法相反,就是在标签开始的地方插入内容。
        还是以上面第一段代码为例子。
    $("p").prepend("<b>world</b>")//插入语句
    
    <p><b>world</b>hello</p>//结果
        after的用法
        这个语句的用法就是在被选元素之后插入内容。
        同样以上面的为例子。

    $("p").after("<b>world</b>")//插入语句
    
    <p>hello</p><b>world</b>//结果

    在选中标签后面插入内容


        before的用法
        跟after相反,在标签前面插入内容
    $("p").before("<b>world</b>")//插入语句

    <b>world</b><p>hello</p>//结果
    $("p").before("<b>world</b>")//插入语句
    
    <b>world</b><p>hello</p>//结果
    下面把这四种用法的代码放在一块,更容易理解。
    <p>hello</p>
    $("p").append("<b>world</b>")使用append插入
    <p><b>world</b>hello</p>//显示结果
    
    $("p").prepend("<b>world</b>")//使用prepend插入
    <p><b>world</b>hello</p>//显示结果
    
    $("p").after("<b>world</b>")//使用after插入语句
    <p>hello</p><b>world</b>//显示结果
    
    $("p").before("<b>world</b>")//使用before插入语句
    <b>world</b><p>hello</p>//显示结果


免责声明:本文所提供的信息(包括图片、文字、视频等)内容均来源于网络,只供参考之用,不代表本站观点。如有侵权、违规,请联系我们删除。
上一条:女子仿妆清宫戏众女主 网友 一个人可以演完整部剧(视频)下一条:C# 实现扫码二维码登录
今日推荐
一周阅读排行
Copyright © 2017-2018 怪里咕咚 All Rights Reserved
滇ICP备17000807号-2
访问量: