Article Categories

Selected Reading

Display all the values of an array in p tag on a web page with JavaScript

Javascript Web Development Object Oriented Programming

In JavaScript, you can display array values as paragraph elements on a web page using several approaches. Here are the most common methods without requiring external libraries.

Method 1: Using forEach() with createElement

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Array Values</title>
</head>
<body>
    <div id="container"></div>
    
    <script>
        const arrayValues = [1000000001, "John", "Smith", 100, 200, 3000];
        const container = document.getElementById('container');
        
        arrayValues.forEach(function(value) {
            const paragraph = document.createElement('p');
            paragraph.textContent = value;
            container.appendChild(paragraph);
        });
    </script>
</body>
</html>

Method 2: Using innerHTML with map()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Array Values</title>
</head>
<body>
    <div id="output"></div>
    
    <script>
        const arrayValues = [1000000001, "John", "Smith", 100, 200, 3000];
        
        const paragraphs = arrayValues.map(value => `<p>${value}</p>`).join('');
        document.getElementById('output').innerHTML = paragraphs;
    </script>
</body>
</html>

Method 3: Using a for loop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Array Values</title>
</head>
<body>
    <div id="result"></div>
    
    <script>
        const arrayValues = [1000000001, "John", "Smith", 100, 200, 3000];
        const resultDiv = document.getElementById('result');
        
        for (let i = 0; i < arrayValues.length; i++) {
            const p = document.createElement('p');
            p.textContent = arrayValues[i];
            resultDiv.appendChild(p);
        }
    </script>
</body>
</html>

Using D3.js (Original Approach)

The original example uses D3.js library for data binding. Here's the corrected version:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3.js Array Display</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <script>
        const arrayValues = [1000000001, "John", "Smith", 100, 200, 3000];
        
        d3.select("body")
          .selectAll("p")
          .data(arrayValues)
          .enter()
          .append("p")
          .text(function(d) {
              return d;
          });
    </script>
</body>
</html>

Output

All methods will produce the same output, displaying each array value in a separate paragraph:

1000000001
John
Smith
100
200
3000

Comparison

Method	External Library	Performance	Best For
forEach() + createElement	No	Good	Simple dynamic content
innerHTML + map()	No	Fast	Static content generation
for loop	No	Good	Basic iteration needs
D3.js	Yes	Moderate	Complex data visualizations

Conclusion

For simple array display, use the native JavaScript methods like forEach() or innerHTML. D3.js is better suited for complex data visualization rather than basic paragraph creation.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

830 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next