2024 IT鐵人賽 Day19 -陣列迴圈組合

#javascript javascript 30

will93068 2024-10-16 20:41:51 ‧ 181 瀏覽

分享至

陣列搭For迴圈渲染

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="app">
      <h1>即時消息</h1>
      <ul class="list"></ul>
      <a href="#">More</a>
    </div>

    <script>
      const title = [
        "這是一條假消息 1",
        "這是一條假消息 2",
        "這是一條假消息 3",
        "這是一條假消息 4",
      ];

      let html = "";
      for (let i = 0; i < title.length; i++) {
        html += `<li><a href="#">${title[i]}</a></li>`;
      }

      document.querySelector(".list").innerHTML = html;
    </script>
  </body>
</html>