我想链接相应的文章动态创建的p元素的关联

Question

here is my codepen link

我的HTML代码

<div id="main"> 
    <h1>Wikipedia Viewer</h1> 
    <form class="form-inline"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-sm-6 col-sm-offset-4 col-lg-7 col-lg-offset-4"> 
      <div class="form-group"> 
      <label class="sr-only" for="search">search</label> 
      <input type="text" class="form-control" placeholder="Search"> 
      </div> 
      <button type="button" class="btn btn-primary"><i class="fa fa-search"></i></button></form> 
    </div> 
    </div> 
    </div> 
    <a href="https://en.wikipedia.org/wiki/Special:Random">Surprise me!</a> 
</div> 
<div id="search"> 
    </search> 

制作维基百科搜索的API调用，然后显示标题jQuery代码和overview.i要关联链接到相应的物品动态创建的p元素

$(document).ready(function() { 
    $("button").click(function() { 
    var article = $("input").val(); 
    $.ajax({     //wikipedia api call 
     url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + article + "&format=json", 
     dataType: "jsonp", 
     success: function(data) { 

     for (var i = 0; i < data.query.search.length; i++) { //displaying titles and snippets accroding to search query. i want to associate link to each dynamically created p element. 
      var title = data.query.search[i].title; 
      var snippet = data.query.search[i].snippet; 
      $("#search").append("<p>" + title + "<br>" + snippet + "</p>"); 
     } 
     $("#main").attr({ 
      'style': 'display: none' 
     }); 
     }, 
     error: function() { 
     $("h1").html("oops"); 
     } 
    }); 
    }); 
}); 

Answer 1

上更改$("#search").append()如下：

$("#search") 
    .append("<p><a href='https://en.wikipedia.org/wiki/" + title + "'>" + title + "</a>" + 
      "<br>" + snippet + "</p>" 
     ); 

Codepen