jquery：如何将 DOM 元素附加到包含其他 DOM 元素的变量中的选择器

Question

When storing DOM elements in a javascript variable prior to appending them to the actual DOM is there a way with jQuery to select elements inside the variable?

For example, I have a list of tweets on my page. Every time I click a refresh button I append a new tweet to the list below. I add the new tweet like follows:

new tweet

<li class="tweet normal-tweet" data-user-name="Dorothy">
    <div class="image">
        <img height="48" width="48" src="http://twitter.com/api/users/profile_image?screen_name=Dorothy" alt="" />
    </div>
    <div class="content">
        <div class="user">
            <a class="user-name" href="http://twitter.com/Dorothy" title="Dorothy">Dorothy</a>
            <div class="full-name"></div>
        </div>
        <div class="text">Once in a lullaby</div>
        <div class="time-stamp" data-time="1322631934000">1322631934000</div>
    </div>
</li>

Inside each tweet on the page, not the new tweet yet, I use jQuery to append some elements. I have:

var actionsMarkup = 
"<div class='actions'>
    <span class='favorite'>Favorite</span>
    <span class='retweet'>Retweet</span>
    <span class='reply'>Reply</span>
</div>";

and I append it to the element with the .content class

$(actionsMarkup).appendTo('#tweets .tweet .content'); 

Now, when I make a new tweet I do the following:

$(document).on('click', '.refresh', function() {
    newTweet = $(<new tweet code from above>);
    actionsMark = $(actionsMarkup);
    $(newTweet.appendTo('#tweets');

I need to be able to append the actionsMark contents to the div with class .content. However, I can't just reapply my prior statement of

$(actionsMarkup).appendTo('#tweets .tweet .content');

because that puts the markup on all .content divs again, even if it is already there.

Is there a way for me to use selectors to access the DOM nodes in my newTweet variable before I append it to the document object? I am thinking something like

$(actionsMarkup).appendTo( newTweet, '.content');

If there is no way with selectors to do this then what are some other quick ways?

List of Tweets and Tweet container

<ul id="tweets" class="normal-tweet show-promoted-tweets">
    <li class="tweet promoted-tweet" data-user-name="Dorothy">
        <div class="image">
            <img height="48" width="48" src="http://twitter.com/api/users/profile_image?screen_name=Dorothy" alt="" />
        </div>
        <div class="content">
            <div class="user">
                <a class="user-name" href="http://twitter.com/Dorothy" title="Dorothy">Dorothy</a>
                <div class="full-name">Dorothy</div>
            </div>
            <div class="text">Somewhere over the rainbow</div>
            <div class="time-stamp" data-time="1322631934000">3 minutes ago</div>
        </div>
    </li>

    <li class="tweet promoted-tweet" data-user-name="lion">
        <div class="image">
            <img height="48" width="48" src="http://twitter.com/api/users/profile_image?screen_name=lion" alt="" />
        </div>
        <div class="content">
            <div class="user">
                <a class="user-name" href="http://twitter.com/lion" title="lion">lion</a>
                <div class="full-name">Lion</div>
            </div>
            <div class="text">Way up high,</div>
            <div class="time-stamp" data-time="1322631934000">17 minutes ago</div>
        </div>
    </li>

    <li class="tweet normal-tweet" data-user-name="scarecrow">
        <div class="image">
            <img height="48" width="48" src="http://twitter.com/api/users/profile_image?screen_name=scarecrow" alt="" />
        </div>
        <div class="content">
            <div class="user">
                <a class="user-name" href="http://twitter.com/scarecrow" title="scarecrow">scarecrow</a>
                <div class="full-name">Scarecrow</div>
            </div>
            <div class="text">And the dreams that you dreamed of,</div>
            <div class="time-stamp" data-time="1322631934000">32 minutes ago</div>
        </div>
    </li>
</ul>

Answer 1

You can use .last() , to select the last element after you append your new tweet, like below:

$(document).on('click', '.refresh', function() {
    newTweet = $(<new tweet code from above>);
    $(newTweet).appendTo('#tweets');
    var actionsMarkup = 
    "<div class='actions'>
        <span class='favorite'>Favorite</span>
        <span class='retweet'>Retweet</span>
        <span class='reply'>Reply</span>
    </div>";
    $("#tweets .tweet").last().find(".content").append(actionsMarkup);
});

if you insist to use appendTo() , you can try using :last-child :

$(actionsMarkup).appendTo('#tweets .tweet:last-child .content'); 

Answer 2

I was looking to see if you can do the same thing, found this question but the existing answer is not useful in my case as i would like to alter the element before adding.

You can create a new dom element in a variable with jQuery and do operations on it as if it is already in the dom before appending it.

Example:

var newTweet = $('<div></div>');

newTweet.addClass('tweet');
newTweet.append('<span class="username"></span>');
newTweet.find('span.username').html('John Doe');
$('body').append(newTweet);

the following will be appended to the body:

<div class="tweet"><span class="username">John Doe</span></div>

Very handy if you are building a reusable interface element (like a dialogue box) with multiple options.