JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tr>
    <th>City</th>
    <th>Country</th>
  </tr>
  <tr id="dados"></tr>
</table>

<button onclick="load()">
  Random
</button>

<button onclick="loadjQuery()">
  Random (jQuery)
</button>

JavaScript

var urlAPI = "https://random-data-api.com/api/address/random_address";

function load() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", urlAPI);

  xhr.onreadystatechange = function() {  
    if (xhr.readyState !== 4) {
      return;
    }
	    
  	var tr = document.getElementById("dados");
    var dados = JSON.parse(xhr.response);
   
    while (tr.firstChild) {
	  	tr.removeChild(tr.firstChild);
		}
   
    var tdCity = document.createElement("td");
    tdCity.innerHTML = dados.city;
    tr.appendChild(tdCity);
    
    var tdCountry = document.createElement("td");
    tdCountry.innerHTML = dados.country;
    tr.appendChild(tdCountry);
  };

  xhr.send();
}

function loadjQuery() {
  $.getJSON(urlAPI, function(dados) {
	  var tr = $("#dados");
    tr.empty();
    tr.append("<td>" + dados.city + "</td>");
    tr.append("<td>" + dados.country + "</td>");
  });
}