Kevin Powell - CommunityKP-C
Kevin Powell - Community•14mo ago
snxxwyy

Where to store data awaiting to be put into the html

Hey, what is the recommended way to store data awaiting to be inserted into the html?

for example, let's say when i click a button, the text inside changes. Where would it be appropriate to store that awaiting value?
<button id="button">Not clicked</button>

const button = document.getElementById("button");

button.addEventListener("click", () => button.textContent = 'Clicked')

obviously 
button.textContent = 'Clicked'
 would be inefficient on a larger scale so putting it in a variable could be good, however something about that doesn't seem right, especially on a larger scale 
const button = document.getElementById("button");
const buttonClickedText = "Clicked";

button.addEventListener("click", () => button.textContent = buttonClickedText)

You could store the value in a data attribute too which would allow easy editing without editing the javascript, but i feel that could pose security risks?
<button id="button" data-clicked-text="Clicked">Not clicked</button>

const button = document.getElementById("button");
const buttonClickedText = button.getAttribute("data-clicked-text")

button.addEventListener("click", () => button.textContent = buttonClickedText)

I know that you can use things like template for things too but I’m more referring to use cases like this example.

i'd appreciate any insight, thanks in advance.
Was this page helpful?