Jquery methods won't add HTML to DOM
<p>I was trying to add data to my existing table using Jquery's append(), but for some reason it did not work. I found another way to solve this problem, but I was wondering why this solution did not work. Could anyone explain it to me?</p>

<p>JS Code:</p>

<pre><code>$(document).ready(function(){
    var mapItems=new Map();
    mapItems.set("firstName", "First Name");
    mapItems.set("lastName", "Last Name");
    mapItems.set("dob", "Date of Birth");
    mapItems.set("gender", "Gender");
    mapItems.set("idnumber", "ID Number");
    mapItems.set("occupation", "Occupation");
    mapItems.set("ethnicity", "Ethinicity");

    function viewAllItems(data){
        var info="";
        for(var x=0; x&lt;data.length;x++){
            info+="&lt;th&gt;";
            for(var key of mapItems.keys()){
                var added=data[x][key];
                added="&lt;tr&gt;"+added;
                added+="&lt;/tr&gt;";
                info+=added;
            }
            info+="&lt;/th&gt;";
        }
        return info;
    }

$("#viewAll").on('click', function(){
        $.ajax({
            url:"A_URL_THAT_RETURNS_DATA",  
            type: "GET",
            success:function(data) { 
                $("#tableViewAll").children().remove();
                $("#tableViewAll").append(viewAllItems(data));
            }
    });
});
});
</code></pre>

<p>HTML</p>

<pre><code>&lt;button id="viewAll"&gt;View All&lt;/button&gt;&lt;br&gt;
        &lt;table id=tableViewAll&gt;
            &lt;tr&gt;
                &lt;th&gt;First Name&lt;/th&gt;
                &lt;th&gt;Last Name&lt;/th&gt;
                &lt;th&gt;Date of Birth&lt;/th&gt;
                &lt;th&gt;Gender&lt;/th&gt;
                &lt;th&gt;ID number&lt;/th&gt;
                &lt;th&gt;Occupation&lt;/th&gt;
                &lt;th&gt;Ethnicity&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
</code></pre>

<p>After console.logging viewAllItems(data), I got a proper HTML string back as a result, here it is: </p>

<pre><code>&lt;th&gt;&lt;tr&gt;sdfsdf&lt;/tr&gt;&lt;tr&gt;asdfasd&lt;/tr&gt;&lt;tr&gt;2006-03-04&lt;/tr&gt;&lt;tr&gt;male&lt;/tr&gt;    &lt;tr&gt;234234234&lt;/tr&gt;&lt;tr&gt;sadf&lt;/tr&gt;&lt;tr&gt;hispanic&lt;/tr&gt;&lt;/th&gt;&lt;th&gt;&lt;tr&gt;John&lt;/tr&gt;&lt;tr&gt;Smith&lt;/tr&gt;&lt;tr&gt;1997-05-23&lt;/tr&gt;&lt;tr&gt;male&lt;/tr&gt;&lt;tr&gt;456456456&lt;/tr&gt;&lt;tr&gt;Garbageman&lt;/tr&gt;&lt;tr&gt;asian&lt;/tr&gt;&lt;/th&gt;&lt;th&gt;&lt;tr&gt;aasd&lt;/tr&gt;&lt;tr&gt;asdfffe&lt;/tr&gt;&lt;tr&gt;2009-06-07&lt;/tr&gt;&lt;tr&gt;male&lt;/tr&gt;&lt;tr&gt;789789789&lt;/tr&gt;&lt;tr&gt;dfhdfbfdgb&lt;/tr&gt;&lt;tr&gt;hispanic&lt;/tr&gt;&lt;/th&gt;
</code></pre>

<p>The information inside doesn't make any sense(on purpose) and is formatted poorly, but I just wanted to show that I get a proper HTML string back as a response. 
Thus, my append method should append this string into the table. However, it does not do so.</p>

<p>Any help would be greatly appreciated. I just want to understand why it didn't work the way I thought it would.</p>

<p>P.S. I realize that I'm deleting my table headings, that's to be fixed. Also, I realized i'm using the th tag when I shouldn't be, but I'll also fix that later</p>