JSFiddle - React, Tailwind, and code Playground

HTML

<div class="generator">
    <div class="dl-template" id="content">
       <span class="dl-info__name">Gerald</span>
    </div>
    <div class="dl-generate">
        <button class="dl-generate-button">Генератор</button>
    </div>
    <div id="result"></div>
  </div>

JavaScript

function parseDateFromGererator(param, separator = null, position = 0) {
  return fetch('https://cors-anywhere.herokuapp.com/https://api.namefake.com/english-united-kingdom/male')
    .then((response) => response.json())
    .then(male => separator ? male[param].split(separator)[position] : male[param])
}


const generateButton = document.querySelector('.dl-generate-button');
const nameElement = document.querySelector('.dl-info__name');


generateButton.addEventListener("click", function() {
  parseDateFromGererator(param = "name")
    .then(name => nameElement.textContent = name)
})