JavaScript动态添加Div：如何实现左侧插入且首元素居中

我当前的代码实现的是从左侧开始向右动态添加Div元素，但我希望改为从左侧插入Div——首个卡片显示在中间，后续新卡片添加到它的左侧（即现有元素的后方）。我尝试设置float:right，但未达到预期效果。相关代码片段如下：

var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var width;
var id;
var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar")...

别着急，float:right确实没法完美实现这个需求，它的浮动逻辑和你想要的“首个居中、新元素插左侧”不太匹配，咱换两个更靠谱的方案：

方案1：用DOM的insertBefore直接插在最前面 #

这是最直接的JS操作方式，每次创建新卡片后，把它插到父元素的第一个子节点前面，这样新卡片就自动出现在现有卡片的左侧了。示例代码：

// 假设你创建新卡片的函数是这样的
function addNewCard() {
  // 创建新的卡片元素
  const newCard = document.createElement('div');
  newCard.className = 'card'; // 替换成你实际的卡片类名
  newCard.textContent = `新卡片${Date.now()}`; // 示例内容
  
  const parentEl = document.getElementById("cards");
  
  // 核心逻辑：如果父元素已有子元素，就插到第一个子元素前面；否则直接追加
  if (parentEl.firstChild) {
    parentEl.insertBefore(newCard, parentEl.firstChild);
  } else {
    parentEl.appendChild(newCard);
  }
}

这样第一个卡片会正常显示在父元素的居中位置（只要你给父元素设了居中样式），之后每加一个新卡片，都会自动跑到现有卡片的左边，完全符合你的需求。

方案2：用Flex布局反向排列（不用改JS逻辑） #

如果你不想修改JS的添加逻辑，只想通过CSS搞定，那Flex布局是绝佳选择。给父元素#cards设置以下样式：

#cards {
  display: flex;
  flex-direction: row-reverse; /* 让子元素从右往左排列，新追加的元素会显示在左侧 */
  justify-content: center; /* 让所有卡片整体居中，首个卡片自然在中间 */
  gap: 12px; /* 卡片之间的间距，按需调整 */
  /* 可以再加个合适的宽度，比如max-width: 1200px; 防止卡片太多溢出 */
}

之后你JS里还是用parentEl.appendChild(newCard)来添加新卡片，因为Flex的row-reverse会把最后追加的元素放到最左边，完美实现你要的效果，而且布局更稳定，不会有float的各种坑。

为啥float:right不行？ #

float的逻辑是让元素向指定方向浮动，多个float:right的元素会从父元素的右上角开始往左排，但父元素如果没有设置固定宽度+居中，第一个卡片根本没法居中，而且float布局容易出现高度塌陷、排版错乱的问题，完全不如上面两种方案靠谱。

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