了解节点以及如何附加

Question

我一直在从事其他一些开发人员已经开始的项目，我试图在完成项目的同时理解代码。目前我所拥有的是一些带有链接和 url 文本的 json（几乎是一个简短的描述），我需要做的是单击按钮，我想显示每个链接及其正确的文本并使其成为可点击的链接。需要完成的方法是使用我不是 100% 了解的节点。如果我需要更多解释，请告诉我，我还提供了一个我目前正在使用的示例。谢谢

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
    <title>JavaScript And JSON</title>
</head>
<body bgcolor='#CED3F3'>

    <button onclick="appendUrl()">Append</button><br>

<br><script id = "i">
    function category()
    //adding function with button click removes html page styling?
       {
        var category = {
                "content": [
                {
                "links": "basic information",
                "urlText": "Basis Information System",
                "urlDesc": "portal for technology development, people search, a keyword search ."
                },
                {
                "links": "http://site.com",
                "urlText": "Net",
                "urlDesc": "the entry page example"
                },
                {
                "links": "http://newsgroups.com",
                "urlText": "Newsgroups",
                "urlDesc": "information internal newsgroups, usage, tools, statistics, netiquette"
                },
                {
                "links": "http://site2.com",
                "urlText": "Another site",
                "urlDesc": "community for transfer of knowledge and technical information"
                },
                {
                "links": "http://news.com",
                "urlText": " some news",
                "urlDesc": "place with news"
                }
            ]
        }

</script>
<script>
    function appendUrl()
        {
        //there needs to be a loop here?
            var link = "needs to loop through links?"
            var node=document.createElement("LI");
            var nodeA=document.createElement("A");
            var textnode=document.createTextNode();
                node.appendChild(nodeA);
                nodeA.appendChild(textnode);
                nodeA.href=(link);
                nodeA.target="_blank";
                document.getElementById("i").appendChild(node);                     
        }   
</script>
</body>
</html>

Answer 1

首先，您需要您的类别函数来实际返回 json 数据，否则它对任何人都没有用。

function category()
{
    var category = {
        "content": [
           ...
        ]
    }
    return category;
}

然后您可以像这样简单地遍历类别对象中的内容数组：

var content = category().content;
for (var i = 0; i < content.length; i++) {
    var item = content[i];
    var link = item.links;
    var node=document.createElement("LI");
    var nodeA=document.createElement("A");
    var textnode=document.createTextNode(item.urlText);
    node.appendChild(nodeA);
    nodeA.appendChild(textnode);
    nodeA.href=(link);
    nodeA.target="_blank";
    document.getElementById("i").appendChild(node);  
}                   

但是，如果您要在标记中创建列表项，则需要将它们添加到 ul 元素中，因此您应该在标记中的某处有一个 ul，如下所示：

<ul id="i"></ul>

并从脚本标签中删除id="i"。您不想将列表项添加到脚本中。

Answer 2

这是 jquery 很容易完成的类型 - 如果你可以在你的项目中使用它。

var ul = $("<ul></ul">);
for(var i in category.content){
  var li = $("<li></li>");
  var a = $("<a href='" + category.content[i].links + "'>" + category.content[i].urlText + "</a>");
  li.append(a);
  ul.append(li);
}
containerDiv.append(ul);

在您的示例中，您还使列表项成为脚本标记的子项。不知道你的目标是什么，但我会有一个普通的 div。

如果你真的必须用普通的javascript来做：

var containerDiv = document.getElementById("parent");
var ul = document.createElement("ul");
for(var i in category.content){
  var li = document.createElement("li");
  var a = document.createElement("a");
  a.href = category.content[i].links;
  a.innerHTML = category.content[i].urlText;
  li.appendChild(a);
  ul.appendChild(li);
}
containerDiv.appendChild(ul); 

小提琴here