如何将数组中的单个元素追加到页面指定div容器中？

这里有几种灵活的实现方案，你可以根据自己的具体需求来选择：

1. 针对带id的指定container #

如果目标是明确的带id的div（比如id="0"、id="1"的容器），可以直接通过getElementById定位，然后追加内容：

// 示例数据数组
const dataArray = ['第一个区块的专属内容', '第二个区块的专属内容'];

// 追加到id="0"的容器
const container0 = document.getElementById('0');
if (container0) {
  // 若要追加纯文本，推荐用textContent或append
  container0.textContent += dataArray[0];
  // 如果是HTML内容，用innerHTML（注意XSS风险，内容不可信时慎用）
  // container0.innerHTML += `<div class="fact-item">${dataArray[0]}</div>`;
}

// 追加到id="1"的容器
const container1 = document.getElementById('1');
if (container1) {
  container1.append(document.createTextNode(dataArray[1]));
}

注意：操作前判断元素是否存在，避免DOM操作报错；优先使用textContent或append()处理纯文本，比innerHTML更安全。

2. 按section顺序批量追加 #

如果需要按页面中.content-fact区块的顺序，把数组元素对应追加到每个container里（不管有没有id），可以用querySelectorAll批量获取容器后遍历：

const dataArray = ['第一块内容', '第二块内容', '第三块内容'];

// 获取所有.content-fact下的container元素
const allContainers = document.querySelectorAll('.module.content.content-fact .container');

allContainers.forEach((container, index) => {
  // 检查数组对应位置是否有内容，避免索引越界
  if (dataArray[index]) {
    // 这里以追加HTML元素为例
    const newContent = document.createElement('p');
    newContent.textContent = dataArray[index];
    container.appendChild(newContent);
  }
});

这种方式会自动匹配数组索引和页面中区块的顺序，适合批量处理的场景。

3. 针对无id的container #

如果要定位那个没有id的container，可以用属性选择器精准匹配：

const targetContainer = document.querySelector('.content-fact .container:not([id])');
const targetContent = dataArray[2]; // 假设数组第三个元素是给无id容器的

if (targetContainer && targetContent) {
  targetContainer.innerHTML += `<div class="fact-content">${targetContent}</div>`;
}

额外提示 #

• 若内容来自用户输入，绝对不要用innerHTML，避免XSS攻击，改用textContent或创建DOM元素的方式。
• 如果数组长度和容器数量不一致，可以加逻辑处理多余的内容（比如存入备用容器）或空容器（比如填充默认提示）。

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