2016-10-04 161 views
-1

我正在嘗試創建一個wikipedia查看器,獲取json數據,然後用帶有您到文章的超鏈接顯示它。問題是當我想給一個特定的元素的href屬性。使用js dom創建超鏈接

$.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); 
    } 
}); 

於是,我打電話的ID(i值)的特定的「P」元素,然後我追加到它的具體網址。我錯過了什麼?

回答

0

嘗試糾正部分代碼實際上沒有多大意義。以下是您的清理和修正版本。雖然它沒有經過測試,但它應該產生一個像<p>data[1][i]: <a href="data[3][i]">data[2][i]</a></p>這樣的格式。

$.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); 
    } 
}); 
+0

雅而且如果'p.setAttribute( 「ID」,i)的;','然後一個變種=的document.getElementById(I);',它遵循一個===未定義,由於p是尚未插入到DOM中。 – chwagssd

-1

您正在使用

p.appendChild(link); 

您應該使用:

p.appendChild(link); 

我認爲這不是唯一的東西錯了,你var a = document.getElementById(i);假設你與IDS的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>