在元素之前附加数据

Question

我正在开发一个墙，我遇到以下代码的问题。从下图中可以看出，新的评论被添加到底部。但我需要附加它，但在commentBox之前附加。我想也许.before（）会派上用场，但我无法弄清楚如何让它发挥作用。关于如何使其发挥作用的任何想法？

jQuery的：

e.closest('.status-border-bottom-box1').find('.commentsList').append(html); // needs to insert before commentBox

HTML：

        <div class="commentsList" style="width: 104%">
        <div id="commentLikeListing" style="width: 100%; display: none"></div>
<?php   $query1 = $this->db->query("SELECT * FROM wallpostcomments wp INNER JOIN users u ON u.userid = wp.userid WHERE wallPostId = '{$row->idwallPosts}' ORDER BY wp.idwallPostComments ASC");
        foreach($query1->result() as $row1)
            if ($query->num_rows() > 0) { ?>
        <div id="likeList" style="display: none; width: 95%"></div>
        <div id="commentsList" style="width: 96%">
        <table cellpadding="0" cellspacing="0" style="width: 408px" class="style1 commentStyle">
        <tr>
        <td valign="top" style="width: 10px">
        <img style="padding: 3px" id="defaultImg a0" src="<?=base_url().$row1->defaultImgURI?>" align="left" width="25px" height="25px" />
        &nbsp;</td>
        <td valign="top" style="width: 319px">
        <a class="font1 link-font1"><b><?=$row1->firstname.' '.$row1->lastname?> </b></a><?=$row1->entryData.'<br>'.date('m/d/Y h:ia ', strtotime($row1->DateTimeCreated))?></a>
        </td>
    </tr>
</table>
        </div>
        <?php } ?>
        <input placeholder="Write a comment..." id="commentBox-<?php echo $row->idwallPosts; ?>" class="textbox1" style="width: 400px"></input>
        </td>
        </tr>

</table>
<?php } } else { ?>
    <div id="commentsListNewData" class="commentStyle" style="visibility: hidden; width: 96%"></div>
    <br>
    <div class="font2" style="text-align: center">Sorry but you are not associated with any churches. Click <span class="link-font1" id="findChurch">here</span> to find your church.</div>
    <?php } ?>
        <div id="newData"></div>
</div>
</div>
</td>

Answer 1

前置？ http://api.jquery.com/prepend/

它不是很清楚你想要什么，但jQuery很可能具有特定的内置功能。正如其他地方所提到的，你有两个commentsList，它会响起警钟。

Answer 2

尝试.after()功能。它在匹配元素集合中的每个元素之后插入由参数指定的内容。

e.closest('.status-border-bottom-box1').find('.commentsList').after(html);