使用javascript动态添加锚点到列表的问题答案

【问题标题】：problem in adding anchor to the list dynamically using javascript使用javascript动态添加锚点到列表的问题
【发布时间】：2011-06-18 19:16:31
【问题描述】：

我正在使用 javascript 从 JSON 对象动态创建一个无序列表。

function renderList(branches) {  
    var ul = document.createElement("ul");
    for (var i=0, n=branches.length; i<n; i++) {
        var branch = branches[i];
        var li = document.createElement("li");
                var text = document.createTextNode(branch.name);
                li.appendChild(text);
        if (branch.branches) {
           li.appendChild(renderList(branch.branches));
        }
        ul.appendChild(li);
    }      
    return ul; 
}

function renderTree()
    {
    var treeRoot = document.getElementById("tree");
    var treeObj = {"root":
            [{
                   "name": "File",
                   "branches":[
                 {"name": "New"},
                             {"name": "Save"},
                             {"name": "Exit"}
                               ]  
                }]
          };
    treeRoot.appendChild(renderList(treeObj.root));
}

在 json 和 javascript 中需要进行哪些更改才能将锚点动态添加到列表中？

动态地从<li> File </li> 到<li> <a href="yahoo.com"> File </a> <li>

【问题讨论】：

标签： javascript html json dom

【解决方案1】：

将li.appendChild(text); 行中的text 替换为锚节点：

function renderList(branches) {  
    var ul = document.createElement("ul");
    for (var i=0, n=branches.length; i<n; i++) {
        var branch = branches[i];
        var li = document.createElement("li");
        var text = document.createTextNode(branch.name);

        // new code here
        var a = document.createElement("a");
        a.setAttribute('href', 'http://yahoo.com')
        a.appendChild( text );
        //

        li.appendChild( a );
        ...

您的网址存储在哪里？（如果您将硬编码的 url 存储在某个地方，您可以更新上面的代码，用您的实际值替换它。）

【讨论】：