Append HTML into table cell using jQuery

Question

This problem is driving me nuts. I have this 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>

I know it's a mess, but it's what I'm working with. So there's more than one matchup-container . I want to loop through all of them on the page, get down to the td with class containing mg-column3 , and append some text to the Team: Win part. My JavaScript/jQuery is as follows:

$('.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);
    });
});

But that doesn't work. I know it must have to do with the ridiculous nesting of the HTML, but I can't figure it out for the life of me. I've tried a bunch of different ways of finding the class with no luck. Here's the JSFiddle . Can anyone help?

Answer 1

At first you did not include the jQuery lib in you jsfiddle.

Second: Why not use the jQuery lib to create Elements. --> Less fuzz.

This works http://jsfiddle.net/qM9js/

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