How to "refresh" div without double click?

I will try to make this as clear as I possibly can. But right now, I have a table being displayed when it's called into HTML. However, when someone types in a president name, I want the fully listed table to go away and display the results that is filtered after the person clicks on "Search for Presidents". I tried a conditional if else statement but it clears out the table (making it blank), then it makes me have to do another click, which then displays the filtered results. Is there any way of preventing that double click?

JSfiddle for viewing https://jsfiddle.net/rtomino/7Lod1szp/1/

The conditional I had but it makes me do the double click.

if (document.getElementById('presidentialTable').innerHTML !== "") {
    document.getElementById("presidentialTable").innerHTML = "";
} else {
    document.getElementById('presidentialTable').appendChild(table);
}

The HTML

<form>
    <label for="name">Name:</label> 
    <input id='input' placeholder="President Name" type="text"> 
    <button onclick="loadPresidents()" type="button">Search for Presidents</button> <button type="button" onclick="clearTable()">Clear</button>
    <div id="presidentialTable"></div>
</form>

The JS

function loadPresidents() {
"use strict";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
        var data = this.responseText,
            jsonResponse = JSON.parse(data),
            table = document.createElement('table');

        table.setAttribute('class', 'history');
        var properties = ['number', 'name', 'date', 'took_office', 'left_office'];
        var capitalize = function(s) {
            return s.charAt(0).toUpperCase() + s.slice(1);
        };

        function filterPresidents(data) {
            var input = document.getElementById('input').value;
            return data.filter(function(historicalData) {
                return historicalData.name.toLowerCase().indexOf(input.toLowerCase()) != -1;
            });

        }

        var tr = document.createElement('tr');
        for (var i = 0; i < properties.length; i++) {
            var th = document.createElement('th');
            th.appendChild(document.createTextNode(capitalize(properties[i])));
            tr.appendChild(th);
        }

        table.appendChild(tr);

        var tr, row;
        var filtered = filterPresidents(jsonResponse["presidents"].president);
        for (var r = 0; r < filtered.length; r++) {
            tr = document.createElement('tr');
            row = filtered[r];
            for (var i = 0; i < properties.length; i++) {
                var td = document.createElement('td');
                td.appendChild(document.createTextNode(row[properties[i]]));
                tr.appendChild(td);
            }
            table.appendChild(tr);
        }

        if (document.getElementById('presidentialTable').innerHTML !== "") {
            document.getElementById("presidentialTable").innerHTML = "";
        } else {
        document.getElementById('presidentialTable').appendChild(table);
        }
    }
};
xhttp.open("GET", "http://schwartzcomputer.com/ICT4570/Resources/USPresidents.json", true);
xhttp.send();
 }

 loadPresidents();

 function clearTable() {
    document.getElementById("presidentialTable").innerHTML = "";
 }