Добавить теги привязки в список HTML

Question

В моем JavaScript я пытаюсь

1) сделать новый тег li 2) сделать новый a (тег привязки) 3) добавить тег привязки к тегу li 4) установить текст для тега привязки (чтобы кто-то мог щелкнуть по нему) 5) установить функцию события onClick для тега привязки (которая будет вызываться при нажатии в 4)) 6) добавить тег li в div

А вот и мой код:

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); 

Очевидно, что это не работает, и все, что я вижу, это просто маркеры (как показано ниже) на моей странице без текста и кликабельного текста (для тегов привязки) <li> <li>

Answer 1

Я бы предложил использовать .innerHTML вместо .innerText и в идеале создать функцию:

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 .

Answer 2

просто используйте innerHTML вместо innerText