javascript - 複数のdiv内にコンテンツを追加する方法 - 終了タグの前?

Question

プレーヤー プロファイルを表す Web ページには、現在、次の JavaScipt コードがあります。

    var CHARTS = ['money', 'matches', 'game', 'pass', 'misere', 'catch'];
    var mobile = (/Android|iPhone|iPad|iPod|Blackberry|BB10/i.test(navigator.userAgent));

    if (!mobile) {
            $.each(CHARTS, function(index, title) {
                    $('#' + title + '_table').hide();
                    $('#' + title + '_button').button().click(function() {
                            $('#' + title + '_table').toggle();
                    });
            });
    }

そして、この HTML コード (各 XXX_tab の最後の 2 行を見てくださいdiv):

<div id="money_tab">
        <div id="money_chart" class="gchart"></div>
        <div id="money_slider" class="jslider"></div>
        <p><input type="button" value="Table" id="money_button"></p>
        <div id="money_table" class="gtable"></div>
</div>

<div id="matches_tab">
        <div id="matches_chart" class="gchart"></div>
        <div id="matches_slider" class="jslider"></div>
        <p><input type="button" value="Table" id="matches_button"></p>
        <div id="matches_table" class="gtable"></div>
</div>

<div id="game_tab">
        <div id="game_chart" class="gchart"></div>
        <p><input type="button" value="Table" id="game_button"></p>
        <div id="game_table" class="gtable"></div>
</div>

<div id="pass_tab">
        <div id="pass_chart" class="gchart"></div>
        <p><input type="button" value="Table" id="pass_button"></p>
        <div id="pass_table" class="gtable"></div>
</div>

<div id="misere_tab">
        <div id="misere_chart" class="gchart"></div>
        <p><input type="button" value="Table" id="misere_button"></p>
        <div id="misere_table" class="gtable"></div>
</div>

<div id="catch_tab">
        <div id="catch_chart" class="gchart"></div>
        <p><input type="button" value="Table" id="catch_button"></p>
        <div id="catch_table" class="gtable"></div>
</div>

各タグの末尾の前に次の 2 行を追加する JavaScript による繰り返しの HTML コードを減らしたいと思います。div

        <p><input type="button" value="Table" id="catch_button"></p>
        <div id="catch_table" class="gtable"></div>

しかし、jQueryでどうやってそれを行うのだろうか？私はできません：

$.each(CHARTS, function(index, title) {
        $('#' + title + '_chart').append('XXX the 2 lines XXX');
        $('#' + title + '_table').hide();
        $('#' + title + '_button').button().click(function() {
                $('#' + title + '_table').toggle();
        });
});

チャートの後にスライダーがある場合があるためです。

だから私の質問は: jQuery を使用して、各<\div>タグの前に何かを追加する方法は?