Missing innerHTML Content

Question

I may be incredibly obtuse, but I can't seem to see what I am missing for this fetch function to display the results on my html page. I saw something appear briefly once, but then it permanently disappeared. I believe the const articles may be an issue, but I don't know what to change it to to display the results I want. Any help will be greatly appreciated.

const baseURL = 'https://cors-anywhere.herokuapp.com/https://fategrandorder.fandom.com/api.php';
const servantTitle = ['Artoria_Pendragon', 'Artoria_Pendragon_(Alter)', 'Artoria_Pendragon_(Lily)', 'Nero_Claudius', 'Siegfried', 'Gaius_Julius_Caesar', 'Altera', 'Gilles_de_Rais_(Saber)', "Chevalier_d'Eon", 'Okita_Sōji', 'Fergus_mac_Róich', 'Mordred', 'Nero_Claudius_(Bride)', 'Ryōgi_Shiki_(Saber)', 'Rama, Water_Iri', 'Lancelot_Saber', 'Gawain', 'Bedivere', 'Elizabeth_Báthory_(Brave)', 'Miyamoto_Musashi', 'Arthur_Pendragon_(Prototype)', 'Suzuka_Gozen', 'Frankenstein_(Saber)', 'Yagyū_Munenori', 'Sigurd', 'Medb_(Saber)', 'Diarmuid_Ua_Duibhne', 'Lanling_Wang', 'Beni-enma', 'Lakshmibai', 'Jason', 'Katsushika_Hokusai_(Saber)', 'Astolfo_(Saber)', 'Dioscuri', 'Tomoe_Gozen_(Saber)', 'Saitō_Hajime'];

const URLs = servantTitle.map(servant =>
  `${baseURL}?action=query&prop=revisions&titles=${servant}&rvprop=content&format=json`
)

console.log(URLs)

fetch(URLs)
  .then(function(result) {
    return result.json();
  }).then(function(json) {
    displayResults(json);
  });

function displayResults(json) {
  while (section.firstChild) {
    section.removeChild(section.firstChild);
  }

  const articles = json.response.docs;

  if (articles.length === 0) {
    const para = document.createElement('p');
    para.textContent = 'No results returned.'
    section.appendChild(para);
  } else {
    for (let i = 0; i < articles.length; i++) {
      const card = document.createElement('div');
      const aka = document.createElement('aka');
      const class1 = document.createElement('class');
      const atk = document.createElement('atk');
      const hp = document.createElement('hp');
      const gatk = document.createElement('gatk');
      const ghp = document.createElement('ghp');
      const stars = document.createElement('stars');
      const cost = document.createElement('cost');
      const clearfix = document.createElement('div');

      card.setAttribute('class', 'card');

      clearfix.setAttribute('class', 'clearfix');

      const container = document.createElement('div');
      container.setAttribute('class', 'container');

      container.appendChild(card);
      card.appendChild(p);
      card.appendChild(aka);
      card.appendChild(class1);
      card.appendChild(atk);
      card.appendChild(hp);
      card.appendChild(gatk);
      card.appendChild(ghp);
      card.appendChild(stars);
      card.appendChild(cost);
      card.appendChild(clearfix);
      section.appendChild(card);
    }
  }
};