如何在循环中每次附加带有新ID的新超链接？

Question

It's my second day on this project :\\

I'm trying to create is : creating a new <a> element with a new href and id attributes in for loop so that I can get each output of the API as a link.

This is my JS Code

var one;
var two;
var hoba;

$(document).ready(function() {
  $("#inp").keyup(function() {
    hoba = $(this).val();
  });

  $("#but").on("click", function() {
    var app = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=revisions&list=search&titles=Main+Page&rvprop=content&origin=*&srsearch=" + hoba;

    $.getJSON(app, function(data) {
      for (i = 0; i < data.query.search.length; i++) {
        console.log(app);
        one = $("<a></a>").text(data.query.search[i].title);

        //var _href = $("a").attr("href");
        $("a").attr("href", 'https://www.wikipedia.org/wiki/' + data.query.search[i].title);
        $("a").attr("id", data.query.search[i].title);

        two = document.createElement("p");
        two.innerHTML = data.query.search[i].snippet;
        $("body").append(one, two);
      }
    });
  });
});

Answer 1

Use same object to set attributes

one = $("<a></a>");
one.text(data.query.search[i].title);
one.attr("href", 'https://www.wikipedia.org/wiki/' + data.query.search[i].title);
one.attr("id", data.query.search[i].title); 

Use jQuery( html, attributes ) to create HTML element.

var anchor = $("<a></a>", {
    "text": data.query.search[i].title,
    "href": 'https://www.wikipedia.org/wiki/' + data.query.search[i].title,
    "id": data.query.search[i].title
});

$("body").append(anchor);

 $(document).ready(function() { $("#inp").keyup(function() { hoba = $(this).val(); }); $("#but").on("click", function() { var app = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=revisions&list=search&titles=Main+Page&rvprop=content&origin=*&srsearch=" + hoba; $.getJSON(app, function(data) { for (i = 0; i < data.query.search.length; i++) { var anchor = $("<a></a>", { "text": data.query.search[i].title, "href": 'https://www.wikipedia.org/wiki/' + data.query.search[i].title, "id": data.query.search[i].title }); var p = $("<p></p>", { "html": data.query.search[i].snippet }); $("body").append(anchor); $("body").append(p); } }); }); }); 

Answer 2

You should to do minor changes in your code as below.

Change code are in between // Changes Code Start and // Changes Code End

var one;
var two;
var hoba;

$(document).ready(function(){
  $("#inp").keyup(function(){
             hoba = $(this).val();
        });
  $("#but").on("click",function(){

    var app = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=revisions&list=search&titles=Main+Page&rvprop=content&origin=*&srsearch="+hoba;

// Changes Code Start

    $.getJSON(app,function(data){
      for(i=0; i<data.query.search.length; i++){
        console.log(app);
        var dataAppend;

    var title = data.query.search[i].title;
    var href = 'https://www.wikipedia.org/wiki/' + data.query.search[i].title;
    var id = data.query.search[i].title;

        dataAppend = "<a href='"+href+"' id='"+id+"'>"+title+"</a>";
        dataAppend += "<p>"+data.query.search[i].snippet+"</p>";

        // \"
        $("body").append(dataAppend);
      }

    });

// Changes Code End

  });
});