href within div

I'm new here and I have a problem turning the DIV link into a real link. At the bottom of the screen I show the link but it is not real. The link called and shown in the browser is the one on my own page. I would like to show the title of an RSS and the link to click and open for reading if necessary. The RSS title and link are changed every 5 sec and shown in the DIV.

Below the DIV and the js file

    <div id="Layer2_Container">
        <div id="relogio"  style="position:relative;text-align:center;margin-top:-1%;right:0%;">
            <SPAN ID="Clock" style="color : White; font-family : Verdana, Arial, Helvetica; font-size : 16pt; font-weight: bold; text-align : center;">00/00/0000 - 00:00:00</SPAN>  
            <script src="js/cameras.js"></script>
        </div>
        <?php
        function get_feeds($url){
            $content = simplexml_load_file($url);
            if(!isset($content->channel)){
                die('Conteúdo rss não é válido');
            }
            $itens = $content->channel;
            return $itens;
        }
        $itens = get_feeds('http://rss.home.uol.com.br/index.xml');
        $i=0;
        echo '<script>var text = new Array();</script>';
        echo '<script>var link = new Array();</script>';
        foreach ($itens->item as $item):
            $i++;
            $texto = $item->title;
            $texto = str_replace("\"", "'",$texto);
            if($item->title!==""){echo '<script>text['. $i .'] = "'.$texto.'";</script>';}

            $link = $item->link;
            $link = str_replace("\"", "'",$link);
            if($item->title!==""){echo '<script>link['. $i .'] = "'.$link.'";</script>';}
        endforeach;
        ?>
        <div>
            <span id="texto" style="color : White; font-family : Verdana, Arial, Helvetica; font-size : 14pt; font-weight: bold; text-align : center;">Notícias do dia...</span>
        </div>
        <a href="#"><div id="link" style="color : White; font-family : Verdana, Arial, Helvetica; font-size : 6pt;"></div></a>
        <div style="color : Yellow; font-family : Verdana, Arial, Helvetica; font-size : 8pt; font-weight: normal; text-align : center;">
            <a onClick="anterior();initInterval(anterior);">Anterior</a>
            <a onClick="pausar();">&nbsp;&nbsp;Pausar&nbsp;&nbsp;</a>
            <a onClick="proxima();initInterval(proxima);"> Próxima</a>
        </div>
    </div>

js file:

var  pos = 0;
var proc = null;
function proxima(){
    if(this.pos == text.length - 1){
        document.getElementById("texto").innerHTML = text[1];
        document.getElementById("link").innerHTML = link[1];
        this.pos = 0;
    }else{
        document.getElementById("texto").innerHTML = text[pos + 1];
        document.getElementById("link").innerHTML = link[pos + 1];
        this.pos++;
    }
}
function anterior(){
    if(pos == 0){
       document.getElementById("texto").innerHTML = text[text.length - 1];
        this.pos = text.length -1;
    }else{
        document.getElementById("texto").innerHTML = text[this.pos - 1];
        this.pos--;
    }   
}
function initInterval(func){
    clearInterval(this.proc);
    this.proc = setInterval(func,"5000");
}
function pausar(){
        clearInterval(this.proc);
        return;
}
this.proc = setInterval("proxima()","5000");

Images:

Thanks in advance for the help !!