Span no appearing on the map to below the zoom icon

I have setup the following osm map with the below codes. I want the contents div to appear below the zoom icon but it doesnt seem to appear. Also when I run this function var setUpdateTimer = setInterval(function() { updateTimer(); },1000); the zoom icon disappear. I would to update the span box to show in how many seconds it will refresh the map. How make the span appear?

function init() {
             map = L.map('map');

             L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
                maxZoom: 18
             }).addTo(map);

             var test1 = new L.LatLng(-1.935114,30.082111); // geographical point (longitude and latitude)
             map.setView(test1, 13);
           var contents = document.createElement("div");
                             contents.style.width="300px";
                             contents.style.height="10px";
                             contents.style.top="100px";
                             //contents.style.margin="30px";


                             contents.innerHTML="<span style='z-index:5;position: absolute;padding: 12px 12px;background-color:white;border: 2px solid rgba(0,0,0,.15);border-radius: 2px;font-size: 14px;' id='counter' name='counter'>10 Seconds</span>";
                             document.getElementById('map').appendChild(contents);
    }


function updateTimer(){
            countUp++;
            countDown=refreshRate-countUp;

            var list = document.getElementById("map");

                            // If the <ul> element has any child nodes, remove its first child node
                            if (list.hasChildNodes()) {
                               var parent = document.getElementById("map");
                                    var child = parent.children[1];
                                    var childval = child.innerHTML;
                                    //document.getElementById("output").innerHTML=childval;
                                    //alert("childValue:"+childval);
                                    parent.children[1].innerHTML="<span style='z-index:5;position: absolute;padding: 12px 12px;background-color:white;border: 2px solid rgba(0,0,0,.15);border-radius: 2px;font-size: 14px;' id='counter' name='counter'>"+countDown+" Seconds</span>";
                            }
            //alert("test : "+document.getElementById("form2").elements["counter"].innerHTML);
            if(refreshRate==countUp){
               //alert("TEST");
               var list = document.getElementById("map");

                            // If the <ul> element has any child nodes, remove its first child node
                            if (list.hasChildNodes()) {
                               var parent = document.getElementById("map");
                                    var child = parent.children[1];
                                    var childval = child.innerHTML;
                                    //document.getElementById("output").innerHTML=childval;
                                    //alert("childValue:"+childval);
                                    parent.children[1].innerHTML="<span style='z-index:5;position: absolute;padding: 12px 12px;background-color:white;border: 2px solid rgba(0,0,0,.15);border-radius: 2px;font-size: 14px;' id='counter' name='counter'>"+refreshRate+" Seconds</span>";
                                countUp=0;
                                countDown=0;
                            }

            }


        }