如何用JavaScript动态将数组数据渲染到Bootstrap HTML页面？

核心思路 #

不再手动编写每个列表项的HTML，而是通过JavaScript遍历activities数组，根据数组元素数量动态生成对应的列表项结构，并将数据填充进去，最后统一插入到父容器中。

完整实现代码 #

1. HTML结构（仅保留父容器）

<div class="container">
  <div class="row"></div>
  <div class="qa-message-list" id="wallmessages">
    <br>
    <!-- 动态生成的列表项将插入到这里 -->
  </div>
</div>

2. JavaScript动态生成代码

// 你的活动数据数组
const activities = [
    {
        "activityOwner": "Raymond Carlson",
        "activityDesc": "Complete all the steps from Getting Started wizard"
    },
    {
        "activityOwner": "Flopsy McDoogal",
        "activityDesc": "Called interested in March fundraising Sponsorship"
    },
    {
        "activityOwner": "Gary Busy",
        "activityDesc": "Get approval for price quote"
    }
];

// 获取父容器
const wallMessages = document.getElementById('wallmessages');

// 遍历数组生成每个列表项
activities.forEach((activity, index) => {
    // 生成单个列表项的HTML字符串，插入对应数据
    const messageItem = `
        <div class="message-item" id="m${index}">
            <div class="message-inner">
                <div class="message-head clearfix">
                    <div class="user-detail">
                        <h5 class="handle">
                            <p>${activity.activityOwner}</p>
                        </h5>
                        <div class="post-meta"></div>
                    </div>
                </div>
                <div class="qa-message-content">
                    <p>${activity.activityDesc}</p>
                </div>
            </div>
        </div>
    `;
    // 将生成的HTML插入到父容器中
    wallMessages.innerHTML += messageItem;
});

关键说明 #

• 用forEach遍历数组，同时获取每个元素的索引index，用来给列表项的id（如m0、m1）赋值，保持和你手动编写时的命名规则一致。
• 直接通过字符串模板（`包裹）拼接HTML结构，把activityOwner和activityDesc直接插入到对应位置，不需要再通过getElementById赋值，简化流程。
• 每次生成的列表项通过innerHTML +=追加到父容器中，最终所有列表项都会被动态渲染出来，不管数组长度多少都能适配。

内容的提问来源于stack exchange，提问作者Nathan Zoho