What is the need of embedding HTML into Javascript code?

I still don’t understand the use of embedding HTML into javascript code. I understand the use of template literals to insert HTML but still not understand why is there a need to embed HTML.

Please tell me what are we trying to achieve by embedding HTML using template literals.

const setPlayerCards = (arr = players) => {
  playerCards.innerHTML += arr.map(({ name, position, number, isCaptain, nickname }) =>
    `<div class="player-card">
      <h2>${isCaptain ? "(Captain)" : ""} ${name}</h2>
      <p>Position: ${position}</p>
      <p>Number: ${number}</p>
      <p>Nickname: ${nickname !== null ? nickname : "N/A"}</p>
    </div>`).join("");
};