瞭解節點以及如何添加

我一直在開發一些其他開發人員已經開始的項目，並試圖在完成項目的同時瞭解代碼。目前我所擁有的是一些帶有鏈接和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>

來源

2013-07-14 Allan Huston

你能更具體地瞭解你不明白的東西嗎？這就是說，關於你當前的代碼的一些評論：（1）函數'category'什麼都不做，它至少應該返回你的數據; （2）關於其他功能，是的，你應該循環你的數據對象;和（3）中，不要將html附加到'

這是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

來源

2013-07-14 19:15:27

我確實考慮過使用jQuery，但是我想確保我首先在更基本的層次上理解它，但這肯定幫助了很多，不過謝謝！ –

相關問題