Hi. I'm trying to select all elements that have a class, get their ID's (if they have one), and append individual spans to the end of my document based on that information. This is as far as I've managed to get:

var element = $(".foo"),
    element_id = element.attr("id"),
    span_id = "for-" + element + "-id-" + element_id,   
    ;

I am hoping to append a span for each element gathered. Here are some examples of the span format I wish to achieve:

<span id="for-img-id-profile"></span>
<span id="for-div-id-content"></span>

If possible, I would also like to allow for elements without an ID to be formatted like so:

<span id="for-h1"></span>

I really appreciate the help as I'm very new to jQuery and am trying to learn.