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("");
};