如何使用div来为单选按钮设置样式，用javascript来实现

Question

我试图让单选按钮一个接一个地出现，每个按钮都有自己的标签。我使用了一个循环，通过json文件的内容，成功地创建了带有标签的单选按钮，但它们却出现在彼此旁边。

我试图将单选按钮和标签包在一个div中，让它们一个接一个地出现，但我不知道该怎么做。这是我目前所做的。

for (const o of i.options){

        const x = document.createElement("INPUT");
        x.setAttribute("type", "radio");
        x.setAttribute("id", "lord");
        window.data.appendChild(x);


        const y = document.createElement("LABEL");
        const t = document.createTextNode(o);
        y.textContent = "Label text";
        y.setAttribute("for", "lord");
        window.data.appendChild(t);

        const div = document.createElement("div");
        div.style.width = "200px";
        div.style.height = "5px";
        document.getElementById("radioButton1").appendChild(div);
      }

Answer 1

而不是附加 radio 和 label 窗口，将它们添加到 div 然后附上 div 到父元素。

由于 div 是块级元素，它应该垂直而来。

for (const o of i.options) {

  const x = document.createElement("INPUT");
  x.setAttribute("type", "radio");
  x.setAttribute(o.id, "lord"); // if there is id key available 


  const y = document.createElement("LABEL");
  const t = document.createTextNode(o);
  y.appendChild(t); // cheanged here
  y.setAttribute("for", "lord");


  const div = document.createElement("div");
  div.style.width = "200px";
  div.style.height = "5px";
  div.appendChild(x); //changed here
  div.appendChild(y); //changed here
  document.getElementById("radioButton1").appendChild(div);
}