作者信息

长期闲置

长风破浪会有时,直挂云帆济沧海。

最近文章
ajax请求时post和get的区别是什么865
ajax默认是异步请求吗346
cors和ajax的区别是什么620
视频教程分类
推荐视频教程
  • php程序员小白到大牛三个月集训php程序员小白到大牛三个月集训
  • Laravel 9 学习正当时—保姆级教程,想学不会都难!Laravel 9 学习正当时—保姆级教程,想学不会都难!
  • 千万级数据并发解决方案(理论+实战)千万级数据并发解决方案(理论+实战)
  • Laravel基础与实战(模块化)Laravel基础与实战(模块化)
  • 首页 >web前端 >前端问答 > 正文

    jquery可以给页面添加元素吗

    原创2022-06-09 16:47:13786 关注公众号:每天精选资源文章推送

    jquery可以给页面添加元素。添加方法:1、利用“元素对象.append("插入内容")”在元素的结尾添加元素;2、利用“元素对象.prepend("插入内容")”在元素的开头添加元素;3、利用“元素对象.after("插入内容")”在被选元素后添加元素;4、利用“元素对象.before("插入内容")”在被选元素后添加元素。

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

    jquery可以给页面添加元素吗

    jquery可以给页面添加元素

    • append() - 在被选元素的结尾插入内容

    $(selector).append(content,function(index,html))

    示例如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>12</title>
    <script src="js/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    $("#btn1").click(function(){
    $("p").append(" <b>插入文本</b>.");
    });
    $("#btn2").click(function(){
    $("ol").append("<li>插入项</li>");
    });
    });
    </script>
    </head>
    <body>
    <p>这是一个段落。</p>
    <p>这是另一个段落</p>
    <ol>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
    </ol>
    <button id="btn1">插入文本</button>
    <button id="btn2">插入列表项</button>
    </body>
    </html>

    输出结果:

    +2.gif

    • prepend() - 在被选元素的开头插入内容

    示例如下:

    $(document).ready(function(){
    $("#btn1").click(function(){
    $("p").prepend(" <b>插入文本</b>.");
    });
    $("#btn2").click(function(){
    $("ol").prepend("<li>插入项</li>");
    });
    });

    输出结果:

    +3.gif

    • after() - 在被选元素之后插入内容

    $(document).ready(function(){
    $("#btn1").click(function(){
    $("p").after(" <b>插入文本</b>.");
    });
    $("#btn2").click(function(){
    $("ol").after("<li>插入项</li>");
    });
    });

    输出结果:

    +4.gif

    • before() - 在被选元素之前插入内容

    $(document).ready(function(){
    $("#btn1").click(function(){
    $("p").before(" <b>插入文本</b>.");
    });
    $("#btn2").click(function(){
    $("ol").before("<li>插入项</li>");
    });
    });

    输出结果:

    +5.gif

    视频教程推荐:jQuery视频教程

    以上就是jquery可以给页面添加元素吗的详细内容,更多请关注php中文网其它相关文章!

    20期PHP线上班

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:jquery
  • 推荐:PHP从基础到实战教程视频

    相关文章

    相关视频


    专题推荐