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=false, position) {
        
        //console.log(param);
        var xhr = new XMLHttpRequest(),
            method = "GET",
            url = "https://cors-anywhere.herokuapp.com/https://api.namefake.com/english-united-kingdom/male";
        
        xhr.open(method, url, true);
        xhr.onreadystatechange = function () {
            if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                response = JSON.parse(xhr.responseText);
                if (separator) {
                    console.log(response.param.split(separator)[position]);
                }
                else {
                    console.log(response.param);
                }
                console.log('name -' +param)
            };
        };
        xhr.send();
    };
    
    
    const generateButton = document.querySelector('.dl-generate-button');
    const name = document.querySelector('.dl-info__name');


    generateButton.addEventListener("click", function () {
        name.innerHTML = parseDateFromGererator(param="name",separator=false,0);
    })