Simple array question

JavaScript
1

Pretty simple question, but what is the need of having 2 .getElementId() methods and why do we need one inside the function? Doesn’t the first one already insert it into the p tag?

<html>
<body>

<h2>JavaScript Arrays</h2>

<p>The length property provides an easy way to append new elements to an array without using the push() method.

<button onclick=“myFunction()”>Try it</button>

<p id=“demo”></p>

<script>
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
document.getElementById(“demo”).innerHTML = fruits;

function myFunction() {
fruits[fruits.length] = “Lemon”;
\\What is the need for having 2 of these elements?
document.getElementById(“demo”).innerHTML = fruits;
}
</script>

</body>
</html>

2

The first one is trying to insert an array to DOM and the second one is trying to insert updated array to the same DOM. Yes there is no need to reference the same DOM twice, that’s why we have variables. You can do something like this instead.

const demoDOM = document.getElementById(“demo”);

then replace your bold texts with,

demoDOM.innerHTML = fruits;

2 Likes
3

Ahh, now I understand. Thank you!