DOM Manipulation Issue

I'd like to be able to make my DOM from this:

-Header

-Home

-Footer

To this:

-Header

-Services

-Footer

In a SPA-like manner, like by using only the index.html. I have this code and can't tell why it's not working. I have done this exact thing like a month ago and it worked back then. Now I really can't tell the reason why it's not updating the DOM in any way when I click the "Services" button in the website navigation. Any ideas, please?

function renderHeader() {
    let output = document.getElementById("output");
    let header = document.createElement("header");

    header.innerHTML = `
        <a id="logo" class="nav" href="" onclick="renderHome();"><img src='Images/logo.svg'/></a>
                <nav>
                        <ul class="wrapperNav listNav">
                <li class="itemNav">
                    <a href="" class="nav" onclick="current(this); renderHome();">Acasa</a>
                                </li>
                                <li class="itemNav">
                    <a href="" class="nav" onclick="current(this); renderServices();">Servicii</a>
                                </li>
                                <li class="itemNav">
                    <a href="" class="nav" onclick="current(this); renderPortfolio();">Portfoliu</a>
                                </li>
                                <li class="itemNav">
                    <a href="" class="nav" onclick="current(this); renderProjects();">Proiecte</a>
                                </li class="itemNav">
                                <li class="itemNav">
                    <a href="" class="nav" onclick="current(this); renderCareers();">Cariere</a>
                </li>
                <li class="itemNav">
                    <a href="" class="nav" onclick="current(this); renderContact();">Contact</a>
                                </li>
                        </ul>
        </nav>`;
    header.setAttribute("id", "header");
    output.appendChild(header);
}

function renderHome() {
    let output = document.getElementById("output");
    let needReplace = document.getElementById("articleID");
    let article = document.createElement("article");

    article.innerHTML = `
        <p>&#10148; Din 2001, City Promotions este un adevarat sprijin pentru partenerii sai, dedicat dezvoltarii brand-urilor 
        prin excelenta in executie, livrata in ON/OFF trading channels, dar si prin alte touch points specifice 
        brand-ului. <br><br>&#10148; Echipa noastra de lucru profesionista este formata din: 225 de angajati full-time 
        (impariti in 7 birouri teritoriale) si peste 700 de angajati part-time anual. <br><br>&#10148; Suntem capabili 
        sa implementam diferite proiecte in acelasi timp, avand o baza de resurse umane complexa, structurata pe profilele 
        necesare pentru orice partener si proiect. Putem face fata cu brio dezvoltarii proiectelor coplexe, intrucat 
        colaboram strans cu 3rd parties specializate in creative work, POSM/Displays production, outsourcing si altele.</p>`;
    article.setAttribute("class", "home article");
    article.setAttribute("id","articleID");
    output.replaceChild(article, needReplace);
}

function renderServices() {
    let output = document.getElementById("output");
    let needReplace = document.getElementById("articleID");
    let article = document.createElement("article");

    article.innerHTML = `
        <p>&#10148; Suntem specializati in dezvoltarea si implementarea campaniilor 
        integrate ce necesita excelenta in executie, fiind orientati catre rezultate 
        concludente. Avem experienta bogata in lucru cu parteneri de elita, reusind de 
        fiecare data sa integram echipele City Promotions in business model-ul clientilor 
        nostri. Pune-ne la incercare!</p>`;
    article.setAttribute("class", "services article");
    article.setAttribute("id","articleID");
    output.replaceChild(article, needReplace);
}


let currentYear = (new Date()).getFullYear();

function renderFooter() {
    let output = document.getElementById("output");
    let footer = document.createElement("footer");

    footer.innerHTML = `
        <p><div class="social"><ul class="listSocial"> 
        <li><a class="nonLink" href="https://www.facebook.com/citypromotionsagency/" target="_blank"><img src="Images/facebook.png"/> 
        &#64;citypromotionsagency</a> / 
        <a class="nonLink" href="https://www.facebook.com/BrandAmbassadorkmine/" target="_blank"> 
        &#64;BrandAmbassadorkmine</a></li>
        <li><a class="nonLink" href="tel:+40213262674"><img src="Images/phone.png"/> 
        021 326 26 74</a></li>
        <li><img src="Images/mail.png"/> office&#64;citypromotions.ro</li></ul>
        Copyright &copy; ${currentYear} City Promotions.</p>`;
    footer.setAttribute("id", "footer");
    output.appendChild(footer);
}

let previousElement;

function current(currentElement) {
    if (previousElement != currentElement && previousElement) {
        previousElement.classList.remove("current");
    }
    currentElement.setAttribute("class","nav current");
    previousElement = currentElement;
}

function start() {
    renderHeader();
    renderHome();
    renderFooter();
}

window.addEventListener("load", start);

<body>
    <div id="output" class="wrapperMain">
        <article id="articleID"></article>
    </div>
</body>