• 技术文章 >web前端 >js教程

    jQuery的insertBefore()方法怎么用

    青灯夜游青灯夜游2019-02-14 15:39:54原创363
    insertBefore()是jQuery的一个内置的方法,用来在一个指定的元素之前插入一些HTML内容。下面本篇文章就来给大家介绍一下insertBefore()的用法,希望对大家有所帮助。

    jQuery的insertBefore()方法

    insertBefore()方法将在每次出现指定元素之前插入HTML内容。【视频教程推荐:jQuery教程

    基本句式:

    $(content).insertBefore(target)

    说明:

    content:表示需要在指定目标之前插入的HTML内容。

    target:表示指定目标。

    insertBefore()方法的使用示例

    示例1:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script>
    $(document).ready(function() {
    $(".demo").click(function() {
    // insertBefore 
    $("<div>在PHP中文网中学习!</div>").insertBefore("p");
    });
    });
    </script>
    </head>
    <body>
    <div class="box">
    <p>学习jQuery</p>
    <div class="demo">单击此处</div>
    </div>
    </body>
    </html>

    效果图:

    1.gif

    说明:

    当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。而,ready() 函数指定当 ready 事件发生时需要执行的代码。

    $(".demo").click():表示当.demo元素发生点击事件时需要执行的代码。

    示例2:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script>
    $(document).ready(function() {
    $(".demo").click(function() {
    // insertBefore 
    $("<div>在PHP中文网中学习!</div>").insertBefore("p");
    });
    });
    </script>
    </head>
    <body>
    <div class="box">
    <p>学习jQuery</p>
    <p>学习php</p>
    <div class="demo">单击此处</div>
    </div>
    </body>
    </html>

    效果图:

    2.gif

    以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目!!!

    以上就是jQuery的insertBefore()方法怎么用的详细内容,更多请关注php中文网其它相关文章!

    第八期线上培训班
    专题推荐:jQuery insertBefore()方法
    上一篇:random()函数怎么使用 下一篇:querySelector方法怎么使用

    相关文章推荐

    • jQuery的文档处理程序详解_jquery• js在指定位置增加节点函数insertBefore()用法实例_javascript技巧• appendChild() 或 insertBefore()使用与区别介绍_基础知识• jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网