translating paragraphs including links

i am making a website where it is available to change language. I have made a few words into links to other webpages explaining what that word means, see code below.

<h4 class="critTitle">Critical infrastructure security</h4>
             <p class="crit">Critical infrastructure security addresses the protection of computer systems, applications, networks, data and digital assets that are critical to a society's national security, economic health and public safety. In the United States, the <a href="https://www.nist.gov/">National Institute of Standards and Technology</a> (NIST) has developed a cybersecurity framework to support IT vendors in this area. In addition, the U.S. Department of Homeland Security's Cybersecurity and Infrastructure Security Agency (CISA) provides additional guidance to strengthen the security of critical infrastructures.</p>

<div class="language">
          <div class="langWrap">
            <a href="#"  language='english' class="lang active">EN</a>
            <a href="#"  language='spanish' class="lang">ES</a>
          </div>
</div>

The code below shows how i translate the text.

const langEl = [...document.querySelectorAll(".lang")];
const critTitleEl = document.querySelector(".critTitle");
const critEl = document.querySelector(".crit");

langEl.forEach((el) => {
    el.addEventListener("click", () => {
      langEl.map(item => item.classList.contains("active") ? item.classList.remove("active") : false);
      el.classList.add("active");
      chosenLanguage = el.innerText;
      search();
  
      const attr = el.getAttribute("language");

      critTitleEl.textContent = data[attr].critTitle;
      critEl.textContent = data[attr].crit;
 });

var data = {
english: {
      critTitle: "Critical infrastructure security",
      crit: "Critical infrastructure security addresses the protection of computer systems, applications, networks, data and digital assets that are critical to a society's national security, economic health and public safety. In the United States, the National Institute of Standards and Technology (NIST) has developed a cybersecurity framework to support IT vendors in this area. In addition, the U.S. Department of Homeland Security's Cybersecurity and Infrastructure Security Agency (CISA) provides additional guidance to strengthen the security of critical infrastructures."
},
spanish: {
      critTitle: "Seguridad de las infraestructuras críticas",
      crit: "La seguridad de las infraestructuras críticas se centra en la protección de sistemas informáticos, aplicaciones, redes, datos y activos digitales que son fundamentales para la seguridad nacional, la salud económica y la seguridad pública de una sociedad. En Estados Unidos, el Instituto Nacional de Normas y Tecnología (NIST) ha desarrollado un marco de ciberseguridad para apoyar a los proveedores de TI en este ámbito. Además, la Agencia de Ciberseguridad y Seguridad de las Infraestructuras (CISA) del Departamento de Seguridad Nacional de EE.UU. ofrece orientaciones adicionales para reforzar la seguridad de las infraestructuras críticas."
}

The problem is that the link dissapears after translating since it gets changed into a string. Is it possible to make it so that the links stays and doesn't get changed to a string?

Solution

Here instead of critEl.textContent you need to use critEl.innerHTML, so html code will be replaced. And your crit inside data need to contain <a... check : updated your here