Javascript 我应该在哪里放置replaceChild（），以便它替换现有的div

我是编程新手，最近开始学习JavaScript。我制作了一个小程序，它获取HSL颜色值并显示该颜色的所有饱和度值。当前，当用户第二次或第三次输入输入值时，它将创建一个新的div（在示例中尝试第二次或第三次输入值）。我想要的是，当用户第二次或第三次输入值时，而不是每次都创建一个新的div时，它应该替换现有的div。我熟悉replaceChild（）方法，但不确定它应该放在哪里

这是我的密码：

var satInput = document.createElement("input");
var satButton = document.createElement("button");

satInput.setAttribute("placeholder", "Write a number between 0 to 360");
satInput.setAttribute("size", "30")
satButton.innerHTML = "Submit";

document.body.appendChild(satInput);
document.body.appendChild(satButton);

var saturation = function() {

    if (satInput.value !== "" && satInput.value >= 0 && satInput.value <= 360) {

        var background = document.createElement("div");
        background.id = "bg";
        document.body.appendChild(background);

        for (var i = 0; i <= 100; i++) {
            var childDiv = document.createElement("div");
            childDiv.id = "color";
            background.appendChild(childDiv);
            childDiv.style.backgroundColor = "hsl(" + satInput.value + "," + i + "%, 50%)";
        }

    } else {
        alert("Please write a number between 0 to 360.");
    }
}

satButton.onclick = saturation;

var satInput=document.createElement（“输入”）；
var satButton=document.createElement（“按钮”）；
setAttribute（“占位符”，“写入0到360之间的数字”）；
satInput.setAttribute（“大小”，“30”）
satButton.innerHTML=“提交”；
文件.body.appendChild（satInput）；
document.body.appendChild（satButton）；
var饱和=函数（）{
如果（satInput.value！==“”&&satInput.value>=0&&satInput.value一种方法是替换
bg
div（如果存在）


var satInput=document.createElement（“输入”）；
var satButton=document.createElement（“按钮”）；
setAttribute（“占位符”，“写入0到360之间的数字”）；
satInput.setAttribute（“大小”，“30”）
satButton.innerHTML=“提交”；
文件.body.appendChild（satInput）；
document.body.appendChild（satButton）；
var饱和=函数（）{
如果（satInput.value！==“”&&satInput.value>=0&&satInput.value）感谢您的努力。