Demo: Add Elements to a JavaScript Array

Enter a value and select Add. Each value is appended to the end of the array with push(), and the current indexes and total length are displayed below.

JavaScript Used in the Demo Top ↑

const data = [];

function addValue(value) {
  data.push(value);
  console.log(data.length, data);
}

The live version renders each value with textContent rather than building HTML from user input.

Do Not Use an Array as a General Key-Value Object Top ↑

The original demo also assigned string keys such as my_ans["key1"]. JavaScript allows extra properties on an array object, but those properties are not normal array elements and do not increase length.

const values = [];
values["key1"] = "value1";

console.log(values.length); // 0
console.log(values.key1);   // value1

If you need named key-value pairs, use a plain object or Map instead.

const answers = {
  key1: "value1",
  key2: "value2"
};

for (const [key, value] of Object.entries(answers)) {
  console.log(key, value);
}

getElementById() and Forms → Array length → Add and Remove Elements with splice() Demo → Display Array Elements → push() Tutorial →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: