How do I move image in the front of Download Now in javascript code?

Question

How do I move this image http://svastara.info/.s/img/icon/download1.png in the front of Download now? Should look something like this: image Download Now

var CountdownTimer = function( id, count, imgurl ) { this.construct(id, count, imgurl); }
CountdownTimer.prototype = {
        construct: function(id,count,imgurl) {
                this.id = id;
                this.object = document.getElementById(id);
                this.count = count;
                this.interval = null;
                this.counted = false;
                this.img = new Image(); // preload
                this.img.src =  imgurl;
                this.img.border = "0";

                (function(obj) {
                        obj.object.onclick = function() {
                                return obj.onclick();
                        };
                })(this);
        },

        tick: function() {
                this.count--;
                this.render();

                if(this.count == 0){ 
                        clearInterval(this.interval);
                        this.interval = null;
                        this.object.appendChild(this.img);
                }
        },

        onclick: function() {
                if(!this.counted) {
                        this.counted = true;
                        this.render();
                        (function(obj) {
                                obj.interval = setInterval(function() {
                                        obj.tick();
                                },1000);
                        })(this);
                        return false;
                } else if(this.count == 0)
                        return true;
                else
                        return false;
        },

        render: function() {
                if(this.count > 0)
                        this.object.innerHTML = "Download (" + this.count + " second" + (this.count == 1 ? "" : "s") + ")";
                else
                        this.object.innerHTML = "Download Now";
        }

};

window.onload = function() {
        var c = new CountdownTimer("delayed",3,"http://svastara.info/.s/img/icon/download1.png");
};

<div>
<a id="delayed" class="stop" href="http://www.epiclosers.com/"&gt;Download (30sec)</a>
</div>

Answer 1

Have a look at the insertBefore method, the existing text should be a child node of the anchor tag.

Having said that, I'm beginning to wonder why people are doing the fancy thing here... You're not unique, I see this sort of thing all the time. The code can be simplified by allowing HTML and CSS to help you. Put the image in the document, set the display to none, and turn it on when you need it. Also, the text after download can be in a span that is also updated as you require. Then whole thing can be managed with a fraction of the code. Final thought on the simplification, you can just disable the link until you're ready to allow.

Also, using a simple debugger in the client, I can change the count to 0 on the fly and bypass the logic altogether. Or, even easier, I can just turn off javascript and click the link. In other words, make sure you're enforcing it through other means that aren't in the client. It's always a bad idea to rely on the client to enforce policy, so back it up on the server side. You may be doing that, so please don't be offended by the comment.