Javascript 如何将div添加到此表行中的span？

我有这样一个表行：

        <tr class="song-row song-row-selected" data-id="1">
                <td data-col="title">
                    <span class="song-content">
                        <img src="img/cover3.jpg" />
                        Song Title
                    </span>
                </td>
                <td>3:37</td>
                <td>song artist</td>
                <td>song album</td>
                <td>23</td>
            </tr>

我想添加一个div，表示歌曲已暂停，并用*：

        <tr class="song-row song-row-selected" data-id="1">
                <td data-col="title">
                    <span class="song-content">
                        <img src="img/cover3.jpg" />
                        Song Title
                        *<div class="song-indicator loading"></div>*
                    </span>
                </td>
                <td>3:37</td>
                <td>song artist</td>
                <td>song album</td>
                <td>23</td>
            </tr>    

我希望使用JQuery。到目前为止，我已经：

function displayPause() {
    $('tr.song-row.song-row-selected:first').each(function() {
        $(this).siblings('td span.song-content').add('<div class="song-indicator paused"></div>');
    });
}

不用说，它不会添加div。另外，我希望有一个函数可以轻松地从span中删除div。有人知道在哪里给我指出正确的方向吗？

就是你想要的：

$(this).find('td span.song-content')
       .append('<div class="song-indicator paused"></div>');

这就是你想要的：

$(this).find('td span.song-content')
       .append('<div class="song-indicator paused"></div>');

您应该使用append和children，而不是兄弟姐妹

您应该使用append和children，而不是兄弟姐妹

你试过了吗？我以为会是孩子们td是那个tr的兄弟姐妹吗？我以为会是孩子们

$(this).children('td span.song-content').append('<div class="song-indicator paused"></div><input type="button" class="removeDiv" value="Remove"/>');

$(document).on("click", ".removeDir", function() {
    $(this).prev(".song-indicator").remove();
    $(this).remove();
});

$("tr.song-row-selected:first td span.song-content").append("*<div class='song-indicator loading'></div>*");