js domでハイパーリンクを作成する

Question

私はウィキペディアのビューアを作成し、jsonデータを取得してから、記事にリンクするハイパーリンクを表示しようとしています。問題は、特定の要素にhref属性を与えたい場合です。

$.getJSON(url1 + search + url2, function(data) { 
    for(i=0; i<data[1].length; i++) { 
    var p = document.createElement("P"); 
    var id = p.setAttribute("id", i); 
    var t = document.createTextNode(data[1][i] + ': ');  
    var text = document.createTextNode(data[2][i]); 
    var a = document.getElementById(i); 
    var link = a.setAttribute("href", data[3][i]); 
    p.appendChild(t); 
    p.appendChild(text); 
    p.appendChild(link); 
    document.body.appendChild(p); 
    } 
}); 

したがって、特定の "p"要素をId（i値）で呼び出してから、特定のURLを追加します。私は何が欠けていますか？

Answer 1

実際には、コードの一部を修正しようとすると意味がありません。以下は、あなたのクリーンアップされたバージョンです。テストされていませんが、<p>data[1][i]: <a href="data[3][i]">data[2][i]</a></p>のような形式を生成する必要があります。あなたが使用する必要があり

p.appendChild(link); 

を使用している

$.getJSON(url1 + search + url2, function(data) 
{ 
    for(var i = 0; i < data[1].length; ++i) 
    { 
     //main element 
     var p = document.createElement("p"); 
     p.id = "element" + i; //you should not use just numbers as IDs 

     //preceding description 
     var t = document.createTextNode(data[1][i] + ': '); 

     //actual link 
     var text = document.createTextNode(data[2][i]); 
     var a = document.createElement("a"); 
     a.href = data[3][i]; 
     a.appendChild(text); 

     //merge all of them together 
     p.appendChild(t); 
     p.appendChild(a); 
     document.body.appendChild(p); 
    } 
}); 

Answer 2

：

p.appendChild(link); 

私はそれが間違っているだけではないと思う、あなたのvar a = document.getElementById(i);はあなたがIDを持つDOMの要素を持っていると仮定し"1"のように見えるvar a = document.createElement（a）;

$.getJSON(url1 + search + url2, function(data){ 
    for(i=0; i<data[1].length; i++){ 
    var p = document.createElement("p"); 
    var t = document.createTextNode(data[1][i] + ': ');    
    var text = document.createTextNode(data[2][i]); 
    var a = document.getElementById(i); 
    var link = a.setAttribute("href", data[3][i]); 
    a.appendChild(t);//put text inside the clickable link 
    a.appendChild(text);//put additional text inside the clickable link 
    p.appendChild(a);//put the link inside the <p> element 
    document.body.appendChild(p);//add the link into the DOM at the end of the body 
    }); 

    //now your element is a <p><a href="someUrl">data[1][i]: data[2][i]</a></p>