Jquery教程
Jquery动效
Jquery HTML/CSS
Jquery 事件
jquery常用

jQuery prepend()

jQuery prepend()方法用于在选定元素的开头(作为第一个子元素)插入指定的内容。只是与jQuery append()方法相反。
如果要在选定元素的末尾插入内容,则应使用append方法。
< strong>语法:
$(selector).prepend(content,function(index,html))

jQuery prepend()方法的参数

参数 说明
content 这是强制性参数。它指定要插入的内容。其可能的值为: HTML元素 jQuery对象 DOM元素
function(index,html) 这是一个可选参数。它指定一个返回所插入内容的函数。 索引:用于提供元素在集合中的索引位置。 HTML :它提供所选元素的当前HTML。

jQuery prepend()方法的示例

让我们以一个示例来演示jQuery prepend()方法。
<!DOCTYPE html>
<html>
<head>
<script src="/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").prepend("<b>添加文字</b>. ");
    });
});
</script>
</head>
<body>
<p>这是第一段。</p>
<p>这是第二段。</p>
<button id="btn1">添加文字</button>
</body>
</html>
输出:

这是第一段。

这是第二段。

jQuery prepend()示例2

<!DOCTYPE html>
<html>
<head>
<script src="/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").prepend("<b>添加文字</b>. ");
    });
    $("#btn2").click(function(){
        $("ol").prepend("<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>
输出:

这是第一段。

这是第二段。

  • 编号1
  • 编号2
  • 编号3
  • jQuery prepend()示例3

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>prepend demo</title>
      <style>
      p {
        background: lightpink;
      }
      </style>
      <script src="/jquery-1.10.2.js"></script>
    </head>
    <body>
     <p>lidihuo.com</p>
    <p>伙伴们!欢迎来到最好的教程网站。</p>
     <script>
    $("p").prepend( "<b>Hello </b>");
    </script>
     </body>
    </html>
    输出:

    Hello lidihuo.com

    Hello 伙伴们!欢迎来到最好的教程网站。

    注意:此处,"Hello"是前置文字。
    昵称: 邮箱:
    Copyright © 2022 立地货 All Rights Reserved.
    备案号:京ICP备14037608号-4