jQuery使用prepend()方法在元素前添加内容用法实例

jQuery使用prepend()方法在元素前添加内容用法实例_jquery

php中文网

发布： 2016-05-16 16:07:28

原创

1638人浏览过

本文实例讲述了jquery使用prepend()方法在元素前添加内容的用法。分享给大家供大家参考。具体分析如下：

下面的代码可实现在文本前和列表前添加新的元素

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("#btn1").click(function(){
  $("p").prepend("<b>Prepended text</b>. ");
 });
 $("#btn2").click(function(){
  $("ol").prepend("<li>Prepended item</li>");
 });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10783">
                            <img src="https://img.php.cn/upload/webcode/000/000/009/176372460979237.jpg" alt="我要服装批发网">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10783">我要服装批发网</a>
                            <p>由逍遥网店系统修改而成，修改内容如下：前台商品可以看大图功能后台商品在线添加编辑功能 （允许UBB）破解了访问统计系统增加整合了更加强大的第三方统计系统 （IT学习者v1.6）并且更新了10月份的IP数据库。修正了后台会员订单折扣金额处理错误BUG去掉了会员折扣价这个功能，使用市场价，批发价。这样符合实际的模式，批发价非会员不可看修正了在线编辑无法使用 &ldquo;代码&rdqu</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="我要服装批发网">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10783" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="我要服装批发网">
                        </a>
                    </div>
                
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Prepend text</button>
<button id="btn2">Prepend list item</button>
</body>
</html>

登录后复制

希望本文所述对大家的jQuery程序设计有所帮助。