Question

我有此搜索选项，用户可以在其中通过Bandsintown API搜索艺术家。它返回大量的数组。

这是我的HTML：

<form>
    <label for="country">Artist:</label>
    <input type="text" name="artiest" id="artiest" placeholder="Fill in Artist"/>
    <input type="button" class="zoekartiest" onclick="getAPIdata();" value="Search"  /> 
</form>
<article id= "land" ></article>

这是我的javascript：

var informationBox = document.getElementById('land');
    var info = response;
    //the var is to get the information out of the API
    for(var i=0; i< info.length; i++){
        var a = (info[i].datetime);
        var b = (info[i].venue.country);
        var c = (info[i].venue.city);
        var d = (info[i].venue.name);
        var e = (info[i].url);

        informationBox.innerHTML += '<table>  <tr> <td>'  + a.substr(0,10) 
            + '</td> <td>' + b 
            + '</td> <td>' + c 
            + '</td> <td>' + d
            +'</td> <td> <a href="' + e +'" target="_blank"> GET TICKETS </a></td> </tr> </table>';
        }

现在，如果我搜索新内容，它只会在表格下添加更多行。但是我想用新的搜索替换旧的搜索。我该怎么办？

Answer 1

您可以轻松地将其清空，然后再次添加其他内容。只需按指定添加以下一行：

var informationBox = document.getElementById('land');
informationBox.innerHTML = '';   // Add this line
        var info = response;

//the var is to get the information out of the API

        for(var i=0; i< info.length; i++){
        var a = (info[i].datetime);
        var b = (info[i].venue.country);
        var c = (info[i].venue.city);
        var d = (info[i].venue.name);
        var e = (info[i].url);


        informationBox.innerHTML += '<table>  <tr> <td>'  + a.substr(0,10) 
        + '</td> <td>' + b 
        + '</td> <td>' + c 
        + '</td> <td>' + d
        +'</td> <td> <a href="' + e +'" target="_blank"> GET TICKETS </a></td> </tr> </table>';
    }

新搜索后如何清除以前的搜索结果？

1 个答案: