调整HTML div顺序后Twitter嵌入式推文无法正常显示问题

核心问题是DOM元素ID全局重复，和容器排列顺序、Twitter嵌入接口逻辑无关：

• 你在正负两类推文的渲染逻辑里，生成单条推文占位div时用了完全相同的ID命名规则：tweetArea${索引}，比如第一条正面推文和第一条负面推文的占位元素ID都是tweetArea0，第二条都是tweetArea1，全页面存在两套重名ID。
• 浏览器原生document.getElementById()永远只会返回DOM树中匹配对应ID的第一个元素：
  • 当负面容器排在前面时，执行负面推文渲染逻辑时，新插入的负面占位元素在DOM中位置更靠前，能被正确选中，推文可以正常嵌入。
  • 当正面容器排在前面时，执行负面推文渲染逻辑时，document.getElementById("tweetAreaX")会优先选中正面容器里已经嵌入过推文的同名元素，负面容器里新插入的空占位div根本没被选中，Twitter的工厂函数自然不会把推文渲染到负面容器里，最终表现为负面容器空白，控制台也不会抛出报错。
• 另外你的循环逻辑里post_id、twitter_area变量没有加作用域声明，会意外泄露到全局，属于额外的代码隐患。

只需要两步修改即可彻底解决问题：

1. 给两类推文的占位元素ID加分类前缀，保证全页面ID唯一，从根源避免冲突
2. 给循环内的临时变量加块级作用域声明，避免全局变量污染

核心代码修改示例 #

修改正面推文渲染逻辑的对应部分：

// 生成占位div时加positive前缀，保证ID唯一
for (subs = 0; subs < positiveTweetsList.length; subs++) {
  if (column_index == 1) {
    col1 += `<div class='embed-responsive' id='tweetArea__positive${subs}'></div>`;
  } else if (column_index == 2) {
    col2 += `<div class='embed-responsive' id='tweetArea__positive${subs}'></div>`;
  } else if (column_index == 3) {
    col3 += `<div class='embed-responsive' id='tweetArea__positive${subs}'></div>`;
  }
  // ... 原有列索引逻辑不变
}

// 嵌入推文时对应匹配带前缀的ID
for (subs = 0; subs < positiveTweetsList.length; subs++) {
  // 加const声明变量，避免全局污染
  const postItem = positiveTweetsList[subs];
  const twitter_area = `tweetArea__positive${subs}`;

  twttr.widgets
    .createTweet(
      postItem.post_id,
      document.getElementById(twitter_area),
      {}
    )
    .then(function() {
      window.setTimeout(hideOverlay, 5000);
    })
    .catch(function(err) {
      console.error('正面推文渲染失败:', err);
    });
}

负面推文渲染逻辑做对称修改即可：所有占位ID的前缀换成__negative，嵌入推文时匹配对应带前缀的ID。

可选优化项 #

如果不需要首屏同时加载两类推文，可以把渲染逻辑从页面初始化执行，改成用户首次点击对应分类按钮时再触发渲染，能减少首屏的Twitter接口请求量，加快页面加载速度。

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