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

Question

我是编程新手，最近开始学习JavaScript。我制作了一个小程序，它接受HSL颜色值并显示该颜色的所有饱和度值。目前，当用户第二次或第三次输入输入值时，它会创建一个新的div（尝试在JSFiddle示例中输入第二次或第三次的值）。我想要的是，当用户输入第二次或第三次的值而不是每次应该替换现有的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;

Answer 1

一种方法是替换bg div（如果存在）

＆＃13;

＆＃13;

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 existing = document.getElementById("bg");
    var background = document.createElement("div");
    background.id = "bg";
    if (existing) {
      document.body.replaceChild(background, existing);
    } else {
      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;

＆＃13;

#bg {
  background-color: #eee;
  border: 1px solid #000;
  text-align: center;
  padding: 10px 0;
  margin-top: 10px;
}
#color {
  display: inline-block;
  height: 20px;
  width: 15%;
  border: 1px solid #000;
  margin: 2px;
  text-align: center;
  font-family: segoe, sans-serif;
  font-size: 14px;
  line-height: 18px;
}

＆＃13;

＆＃13;

＆＃13;

另一种方法是删除bg的内容，然后添加新内容

＆＃13;

＆＃13;

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.getElementById("bg");
    if (background) {
      background.innerHTML = '';
    } else {
      background = document.createElement("div");
      document.body.appendChild(background);
      background.id = "bg";
    }


    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;

＆＃13;

#bg {
  background-color: #eee;
  border: 1px solid #000;
  text-align: center;
  padding: 10px 0;
  margin-top: 10px;
}
#color {
  display: inline-block;
  height: 20px;
  width: 15%;
  border: 1px solid #000;
  margin: 2px;
  text-align: center;
  font-family: segoe, sans-serif;
  font-size: 14px;
  line-height: 18px;
}

＆＃13;

＆＃13;

＆＃13;