Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


How do I add a span to the text within an anchor so that I can target it with css?

I'm trying to use css to replace some anchor text on a page with a picture instead. Here's the anchor:

<a href="/sites/hunter/BC/P55_Docs/Lists/test paperclip/Attachments/1/InternalLeaveCalendar.stp">InternalLeaveCalendar.stp</a>

I want to replace the text 'InternalLeaveCalendar.stp' and instead, show an img.

The JavaScript that generates this anchor is this:

(function () {

    // Create object that have the context information about the field that we want to change it output render  

    var attachmentsFiledContext = {};

    attachmentsFiledContext.Templates = {};

    attachmentsFiledContext.Templates.Fields = {

        "Attachments": { "View": AttachmentsFiledTemplate }



// This function provides the rendering logic for list view 
function AttachmentsFiledTemplate(ctx) {
    var itemId = ctx.CurrentItem.ID;
    var listName = ctx.ListTitle;       
    return getAttachments(listName, itemId);

//get attachments field properties
function getAttachments(listName,itemId) {

    var url = _spPageContextInfo.webAbsoluteUrl;
    var requestUri = url + "/_api/web/lists/getbytitle('" + listName + "')/items(" + itemId + ")/AttachmentFiles";
    var str = "";
    // execute AJAX request
        url: requestUri,
        type: "GET",
        headers: { "ACCEPT": "application/json;odata=verbose" },
        async: false,
        success: function (data) {
            for (var i = 0; i < data.d.results.length; i++) {
                str += "<a href='" + data.d.results[i].ServerRelativeUrl + "'>" + data.d.results[i].FileName + "</a>";
                if (i != data.d.results.length - 1) {
                    str += "<br/>";
        error: function (err) {
    return str;

Here's my plan:

1 - add span tags around the InternalLeaveCalendar.stp text

2 - target it and remove it via this css:

a[href*="attachments"] span {display:none;}

3 - show an img file via css

For more context, the file is an attachment on a list. I want to show a paperclip instead of a the name of the attachment.

Can anyone lend some help?

1 Answer

You should add the image in the script instead, you can see it is grabbing the file name in the line below. Change that line to your desired image. If you want you could insert the file name as the alt tag.

<a href='" + data.d.results[i].ServerRelativeUrl + "'>" + data.d.results[i].FileName + "</a>

first off, thanks for responding. Second, would it look like this:

<a href='" + data.d.results[i].ServerRelativeUrl + "'>" + <img src='/_layouts/15/images/attach16.png?rev=40'/> + "</a>

(forgot to mention, i'm a complete noob at JavaScript)

Actually, I figured out it should look like this:

<a href='" + data.d.results[i].ServerRelativeUrl + "'><src='/_layouts/15/images/attach16.png?rev=40'/></a>

But how would I add a class to that? I tried and it didn't work.

Nvm, figured that out too :-D Simple Enough

<a href='" + data.d.results[i].ServerRelativeUrl + "'><img class='pClip' src='/_layouts/15/images/attach16.png?rev=40'/></a>