Append anchor tags to list html

And h开发者_运维技巧ere is my code :

var newLi = document.createElement('li');
var newA = document.createElement('a');
newLi.appendChild(newA);
//newA.href='#';
newA.innerText = "Go here";
newA.onClick = function(){
                      // do something here
              }
document.getElementById('map_canvas').appendChild(newLi); 

Obviusly it is not working and all I see is Just the bullets(as below) on my page with no text and clickable text (for anchor tags) <li> <li>

just use innerHTML instead of innerText

I'd suggest using .innerHTML in place of .innerText, and ideally creating a function:

function listLinks(listId, url,text){

    var linkList;
    if (document.getElementById(listId)) {
        linkList = document.getElementById(listId);
    }
    else {
        linkList = document.createElement('ul');
        document.body.appendChild(linkList);
    }
    var newA = document.createElement('a');

    newA.innerHTML = text;
    newA.href = url;
    newA.onclick = function(){
        this.style.color = '#f00'; // or whatever...
        return false;
    };

    var newLi = document.createElement('li');

    newLi.appendChild(newA);

    linkList.appendChild(newLi);
}

// call as:
listLinks('links','http://google.com/','Google');

JS Fiddle demo.