Adding span section to javascript

On my page here I need to add a 'span' to or after the 'a' for the previous and next controls (so I can add CSS triangles for the arrows).

Here's the javascript:

    /**
     * Appends prev / next controls to the controls element
     */
    var appendControls = function(){
        slider.controls.next = $('<a class="bx-next" href="">' + slider.settings.nextText + '</a><span class="arrow-e"></span>');
        slider.controls.prev = $('<a class="bx-prev" href="">' + slider.settings.prevText + '</a>');
        // bind click actions to the controls
        slider.controls.next.bind('click', clickNextBind);
        slider.controls.prev.bind('click', clickPrevBind);
        // if nextSlector was supplied, populate it
        if(slider.settings.nextSelector){
            $(slider.settings.nextSelector).append(slider.controls.next);
        }
        // if prevSlector was supplied, populate it
        if(slider.settings.prevSelector){
            $(slider.settings.prevSelector).append(slider.controls.prev);
        }
        // if no custom selectors were supplied
        if(!slider.settings.nextSelector && !slider.settings.prevSelector){
            // add the controls to the DOM
            slider.controls.directionEl = $('<div class="bx-controls-direction" />');
            // add the control elements to the directionEl
            slider.controls.directionEl.append(slider.controls.prev).append(slider.controls.next);
            // slider.viewport.append(slider.controls.directionEl);
            slider.controls.el.addClass('bx-has-controls-direction').append(slider.controls.directionEl);
        }
       }

Select allOpen in new window

This is where I'm trying to add it, but the span's not showing:

slider.controls.next = $('<a class="bx-next" href="">' + slider.settings.nextText + '</a><span class="arrow-e"></span>');

Select allOpen in new window

Any ideas much appreciated.