src/sample-1.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Efficiently Merging Arrays in JavaScript</title>
  </head>
  <body>
    <div class="d-flex flex-column vh-100">
      <nav class="navbar navbar-dark bg-primary">
        <div class="container-fluid">
          <span class="navbar-brand">Efficiently Merging Arrays in JavaScript</span>
        </div>
      </nav>

      <div class="container">
        <div class="mt-5">
            <h2>Sample #1</h2>
            <div class="d-flex">
                <div class="me-5">
                    <b>array1</b>
                    <div class="d-flex">
                        <div class="border px-2 py-1">A</div>
                        <div class="border px-2 py-1">B</div>
                        <div class="border px-2 py-1">C</div>
                        <div class="border px-2 py-1">D</div>
                        <div class="border px-2 py-1">E</div>
                    </div>
                </div>

                <div>
                    <b>array2</b>
                    <div class="d-flex">
                        <div class="border px-2 py-1">Z</div>
                        <div class="border px-2 py-1">Y</div>
                        <div class="border px-2 py-1">X</div>
                        <div class="border px-2 py-1">W</div>
                        <div class="border px-2 py-1">V</div>
                    </div>
                </div>
            </div>

            <button class="btn btn-primary mt-3" onclick="mergeArrays(event)">Merge Arrays</button>

            <div id="resultBlock" class="d-flex mt-3"></div>
        </div>

      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script type="text/javascript">
        const array1 = [ 'A', 'B', 'C', 'D', 'E' ];
        const array2 = [ 'Z', 'Y', 'X', 'W', 'V' ];

        function mergeArrays(e) {
            e.preventDefault();

            const result = array1.concat(array2);
            renderResult(result);
        }

        function renderResult(result) {
            let html = '';
            for (let i=0; i<result.length; i++) {
                html += '<div class="border px-2 py-1">' + result[i] + '</div>';
            }

            const resultBlock = document.getElementById('resultBlock');
            resultBlock.innerHTML = html;
        }
    </script>
  </body>
</html>