javascript - 有没有更好的方法来使用 jQuery 附加 HTML

Question

我创建了一个访问维基百科 API 的维基百科查找器网络应用程序。但是，为了将 JSON 数据附加到 HTML，我使用了 append() 函数:

$('.results').append('<a class="linksa" href=' + testCheck[key].fullurl +'> <div class="entryOne"><h1>'+ testCheck[key].title + '</h1>'+testCheck[key].extract+'</p></div></a>');

问题是当用户想要在搜索栏中搜索新词时。由于 append()，新结果位于先前结果之下。我的应用程序的代码笔是 https://codepen.io/mrsalami/pen/NwrGjj

Answer 1

在添加新内容之前必须清除 .result，下面是代码片段

$(document).ready(function(){
    $(".button").on("click", function(){
        var value = $('#searchItem').val();
        var url = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=info%7Cextracts&list=&generator=search&utf8=1&inprop=url&exsentences=2&exintro=1&gsrsearch=" + value + "&gsrlimit=10&origin=*"
        $.getJSON(url, function(x) {
            var testCheck = x.query.pages;

            // Clear the div before appending current result
            $('.results').html("");
            for (var key in testCheck) {
                if (testCheck.hasOwnProperty(key)) {
                    console.log(testCheck[key].title);
                    console.log(testCheck[key].fullurl);
                    console.log(testCheck[key].extract);
                    $('.results').append('<a class="linksa" href=' + testCheck[key].fullurl +'> <div class="entryOne"><h1>'+ testCheck[key].title + '</h1>'+testCheck[key].extract+'</p></div></a>');
                }
            }
        });
    });
});

header {
    text-align: center;
    margin-bottom: 40px;
}

.entryOne {
    background-color: white;
    border: 6px solid red;
    min-height: 90px;
    padding: 10px;
    margin-bottom: 30px;
}

.linksa {
    text-decoration: none !important;
    color: black;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h1>Jafar Wikipedia Search</h1>
    <input type="text" name="searchItem" class="searchItem" id="searchItem" placeholder="Search">
    <a class="button">Button</a>
</header>
  
<div class="results"></div>