Javascript 当尝试在Div旁边放置另一个具有相同类名的Div时，Div将被替换

问题：

我有一个下拉菜单，可以选择颜色。选择颜色后，下拉菜单关闭，所选颜色由方框div表示，背景图像设置为具有所选颜色的图像

这只是让使用页面的人知道他们选择了什么颜色的一种方式。如果他们想选择更多颜色，可以返回颜色菜单并选择其他颜色。发生这种情况时，新选定的颜色应放在先前选定的颜色旁边

我所尝试的：

我用背景图像来表示颜色。不管怎样，我不能达到我想要的效果。第一个select COLOR div刚刚被新的替换。我已经阅读了很多文章，并尝试了.prepend（），.append（），.after（），.insertAfter（）

我已经在JSFIDLE上复制了我的代码。我有一个默认图像，显示页面加载的时间，然后每次单击保存div框的容器时，我都尝试附加一个新图像

我的代码：

HTML:

CSS:

---

这里可能缺少什么？

此代码就是问题所在：

$(".colour-box")
       .css("background-image", "url('https://media.istockphoto.com/photos/bright-brown-leather-texture-seamless-square-background-tile-r-picture-id958497414')")

这段代码本质上是说“使用类“color box”查找页面上的任何元素，并更改这些元素的CSS背景图像。”您没有创建新的元素，而是在更新旧的元素

如果要创建新元素，可以执行以下操作：

$(".colour-boxes-container").on('click', function() {
  var $div = $(document.createElement('div'));
  $div.addClass('colour-box');
  $div.css("background-image", "url('https://media.istockphoto.com/photos/bright-brown-leather-texture-seamless-square-background-tile-r-picture-id958497414')")
  $(".colour-boxes-container").append($div);
});

---

工作得很好。谢谢我不敢相信我忽略了这一点。

.colour-boxes-container {
  height: 55px;
  width: auto;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: left;
}

.colour-box {
  height: 33px;
  width: 33px;
  margin-right: 7px;
}

$(".colour-box")
       .css("background-image", "url('https://media.istockphoto.com/photos/bright-brown-leather-texture-seamless-square-background-tile-r-picture-id958497414')")

$(".colour-boxes-container").on('click', function() {
  var $div = $(document.createElement('div'));
  $div.addClass('colour-box');
  $div.css("background-image", "url('https://media.istockphoto.com/photos/bright-brown-leather-texture-seamless-square-background-tile-r-picture-id958497414')")
  $(".colour-boxes-container").append($div);
});