JSFiddle - React, Tailwind, and code Playground

HTML

<div id="output"></div>

CSS

#output {
    margin:1em;
    font-size:16pt;
    color:#666;
    font-family:"Arial";   
}

JavaScript

// Use this to help display the results
var output = document.getElementById("output");

// Create the fruits array:
var fruits = ["Apple", "Orange", "Banana"];

// Set the value of first_item to the item at the 0 index:
var first_item = fruits[0];

// Display the first item in the fruits array - this is "Apple"
var first_item_node = document.createTextNode("First Item: " + first_item);
output.appendChild(first_item_node);

// Add a couple <br /> tags to our page:
output.appendChild(document.createElement("br"));
output.appendChild(document.createElement("br"));

// Add a fourth fruit:
fruits.push("Pineapple");

// Display the "All Fruits" header
var all_fruits_node = document.createTextNode("All fruits:");
output.appendChild(all_fruits_node);

// Add a <br /> tag to our page:
output.appendChild(document.createElement("br"));

// Now, using a for loop, iterate through each fruit.
for(var i = 0; i < fruits.length; i++){
    
    // Set the value of "fruit" to the value of the item at "i" index in our fruits array
    var fruit = fruits[i];
    
    // If we are not on the last fruit, add a " | " to separate our list
    if(i != (fruits.length-1)){
        fruit += " | ";
    }
    
    // Display the current fruit
    var display_node = document.createTextNode(fruit);
    output.appendChild(display_node);

}