如何使用 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 附加到 window，而是将它们附加到 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);
}

如何使用 div 为带有 javascript 的单选按钮设置样式

How to use a div to style radio buttons with javascript

javascript

label

radio-button