As mentioned earlier, cache the page element node so it can be repeatedly accessed. It is a callable object in memory until the end of the session.
const first = document.querySelector('#first')
innerHTML are old school. The former should never be used on a page that faces the web. The latter is used when the text contains HTML. Today we have
first.textContent = "This will go straight to the screen";
If we wish to grow the text content. then,
first.textContent += "This will also go straight to the screen following the above."
The above could assume a paragraph element which is a content container. However we could append a paragraph that contains the text given that
#first is a DIV.
let p = document.createElement('p');
p.textContent = "Text to populate the paragraph";
We can create the element at the top of the script along with the page element node, and leave it cached. We can repopulate it and append as often as we wish. When working with it in the script it is only in memory, not in the document the way
In script it is often recommended we use liberal amounts of whitespace, especially surrounding operators.
a = 5 * n
as opposed to,
However, in HTML we generally don’t use a lot of whitespace.
as opposed to,
<p id = "some-id"></p>
<script src = "some-script.js"></script>
Attributes are declarations, and as elements may have several or many attributes, the norm is to only use whitespace to separate them.
<img src="picture.png" width="250" height="200" alt="">