JQuery append方法求助？

网页内容如下：<div class="context">
<blockquote>
<p>XXXXXXXXXXXXXXXX</p>
</blockquote>
</div>CSS部分代码如下：.context blockquote{
background: url("images/icon_quote_s.gif") no-repeat scroll 10px 10px #F9F9F9;
     border: 1px solid #ccc;
     margin: 0 0 1em;
     padding: 35px 20px 0;
}.blockquote_bottom {
    background: url("images/icon_quote_b.gif") no-repeat scroll right center #FAFAFA;
    height: 30px;
    margin-right: -10px;
}
现在想达到如下效果：<div class="context">
<blockquote>
<p>XXXXXXXXXXXXXXXX</p>
</blockquote>
<div class="blockquote_bottom"></div>
</div>使用JQuery append方法，代码如下：$(function(){
$("blockquote").append('<div class="blockquote_bottom"></div>');
});
但是却没有成功，求解？不胜感激！jquerydivappendjavascript

解决方案 »

  1.   

    append的父节点略有不妥，加到div上即可
    即将
    $(function(){
        $("blockquote").append('<div class="blockquote_bottom"></div>');
    });
    改成
    $(function(){
    $(".context").append('<div class="blockquote_bottom"></div>');
    });<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title>
    <style>.context blockquote{
    background: url("images/icon_quote_s.gif") no-repeat scroll 10px 10px #F9F9F9;
         border: 1px solid #ccc;
         margin: 0 0 1em;
         padding: 35px 20px 0;
    }.blockquote_bottom {
        background: url("images/icon_quote_b.gif") no-repeat scroll right center #FAFAFA;
        height: 30px;
        margin-right: -10px;
    }</style>
     <script src="jquery.js" type="text/javascript"></script>
    </head><body>
    <div class="context">
    <blockquote>
    <p>XXXXXXXXXXXXXXXX</p>
    </blockquote>
    </div>
    </body>
    <script type="text/javascript">
    $(function(){
    $(".context").append('<div class="blockquote_bottom"></div>');
    });
    </script>
    </html>
      

  2.   

    如果我的代码是这样，那就不能用context了，该如何处理呢？<div class="context">
        <blockquote>
            <p>XXXXXXXXXXXXXXXX</p>
        </blockquote>
    <p>XXXXXXXXXX</p>
    <p>XXXXXXXXXX</p>
    </div>
      

  3.   

    after来插入<div class="context">
        <blockquote>
            <p>XXXXXXXXXXXXXXXX</p>
        </blockquote>
        <p>XXXXXXXXXX</p>
        <p>XXXXXXXXXX</p>
    </div>
    <script src="http://www.coding123.net/js/jquery.js"></script>
    <script >
    $(function(){
    $('blockquote').after('<div class="blockquote_bottom"></div>');
    });
    </script>