使用jQuery將HTML附加到表格單元格中

Question

這個問題使我發瘋。 我有這個HTML：

<div class="matchup-container">
    <div class="gamequestion">
        <strong>Who will win?</strong>
    </div>
    <table class="mg-gametableQ">
        <tbody>
            <tr>
                <td class="mg-column1 start">
                    <div class="matchupDate">
                        <span class="startTime">11:00 AM</span>
                    </div>
                </td>
                <td class="mg-column3 opponents  ">
                    <span>
                        <strong>
                            <a href="link">Team</a>: Win
                        </strong>
                    </span>
                </td>
            </tr>
            <tr>
                <td class="mg-column1 start">
                    <div class="matchupDate">
                        <span class="startTime">11:00 AM</span>
                    </div>
                </td>
                <td class="mg-column3 opponents   otherthings">
                    <span>
                        <strong>
                            <a href="link">Team</a>: Win
                        </strong>
                    </span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

我知道那是一團糟，但這是我正在使用的。 因此，有不止一個matchup-container 。 我想遍歷頁面上的所有內容，並通過包含mg-column3類進入td ，並將一些文本添加到Team：Win部分。 我的JavaScript / jQuery如下：

$('.matchup-container').each(function() {
    $(this).find('.mg-column3').each(function () {
        var span = document.createElement("span");
        var text = document.createTextNode("APPENDED TEXT");
        span.appendChild(text); 
        $(this).append(span);
    });
});

但這是行不通的。 我知道它一定與HTML的可笑嵌套有關，但是我無法一輩子搞清楚。 我嘗試了很多不同的方法來找到沒有運氣的課程。 這是JSFiddle 。 有人可以幫忙嗎？

Answer 1

最初，您沒有在jsfiddle中包含jQuery庫。

第二：為什么不使用jQuery庫創建Elements。 ->減少絨毛。

這適用於http://jsfiddle.net/qM9js/

;(function ($) {
    $(function () {
        $('.matchup-container').each(function () {
            $('.mg-column3', this).each(function () {
                alert(2)
                $(this).append('<span>' + "APPENDED TEXT" + '</span>');
            });
        });
    });
}(jQuery));