Erstellen Sie einen Hyperlink mit js dom

Question

Ich versuche, einen Wikipedia-Viewer zu erstellen, erhalten Sie JSON-Daten und zeigen Sie es dann mit einem Hyperlink, die Sie zu dem Artikel führen. Das Problem ist, wenn ich das href-Attribut einem bestimmten Element geben möchte.

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

Also, ich rufe das spezifische "p" Element von Id (i-Wert) und dann zu der spezifischen URL ich anhänge. Was vermisse ich?

Answer 1

Es macht eigentlich keinen Sinn, wenn Sie versuchen, Teile Ihres Codes zu korrigieren. Das Folgende ist eine bereinigte und korrigierte Version von Ihnen. Obwohl es noch nicht getestet wurde, sollte es ein Format wie <p>data[1][i]: <a href="data[3][i]">data[2][i]</a></p> produzieren.

$.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

Sie verwenden

p.appendChild(link); 

sollten Sie verwenden:

p.appendChild(link); 

Ich denke, das ist nicht das einzige, was falsch ist, Ihre var a = document.getElementById(i); vorausgesetzt, dass Sie ein Element im DOM mit ids haben wie "1" aussehen 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>