将锚标记附加到列表 html答案

【问题标题】：Append anchor tags to list html将锚标记附加到列表 html
【发布时间】：2011-10-13 19:00:53
【问题描述】：

在我的 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>

【问题讨论】：

这可能不是原因，但该属性称为onclick，而不是onClick。问题更有可能是innerText 是特定于IE 的。你在用什么浏览器？
顺便说一句，li 是 div 元素的无效子元素；据我所知，它只能（有效地）放在ol 或ul 中。

标签： html append anchor html-lists

【解决方案1】：

只需使用 innerHTML 而不是 innerText

【讨论】：

【解决方案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.

【讨论】：