Question

在我的javascript中尝试

1）制作新的li标签

2）制作一个新的（锚标签）

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

Answer 2

我建议使用.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 demo

附加锚标签以列出html

2 个答案: