如何让一个圆只出现在不同颜色的特定div中？

<div id="red" style="background-color: red;"></div>
<div id="blue" style="background-color: blue;"></div>
<div id="green" style="background-color: green;"></div>

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

var redDiv = document.getElementById("red");
var blueDiv = document.getElementById("blue");
var greenDiv = document.getElementById("green");

var circle = document.createElement("div");
circle.className = "circle";

redDiv.appendChild(circle); // 将圆形元素添加到红色div中