Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140762

jquery: how to append DOM element to selector within variable containing other DOM elements

$
0
0

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>

Viewing all articles
Browse latest Browse all 140762

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>