javascript - 显示带有换行符的动态创建的单选按钮

Question

我有一些代码可以使用 javascript 在 html 页面上动态创建单选按钮。我在哪里以及如何添加 "<br>"为了让单选按钮在生成的 html 页面上每行显示一个？ 请通过下面的链接查看 jsfiddle。

http://jsfiddle.net/kevalbhatt18/owuqm8j8/

 var radio_home = document.getElementById("radio_home");

 function makeRadioButton(options) {
     var div = document.createElement("div");
     for (var i = 0; i < options.length; i++) {
         var label = document.createElement("label");
         var radio = document.createElement("input");
         radio.type = "radio";
         radio.name = options[i].name;
         radio.value = options[i].value;
         label.appendChild(radio);
         label.appendChild(document.createTextNode(options[i].text));
         div.appendChild(label);
         }
       radio_home.appendChild(div);
 }
 var options = [{
     name: "first",
     value: "yes",
     text: "yes"
 }, {
     name: "first",
     value: "no",
     text: "no"
 }]
  var options2 = [{
     name: "second",
     value: "ohhh yes",
     text: "ohhh yes"
 }, {
     name: "second",
     value: "ohhh no",
     text: "ohhh no"
 }]
makeRadioButton(options);
makeRadioButton(options2);

<div id="radio_home"></div>

Answer 1

添加一个<br>标记你只需使用 document.createElement像对单选按钮所做的那样运行，并在之后直接附加它

function makeRadioButton(options) {
    var div = document.createElement("div");
    for (var i = 0; i < options.length; i++) {
        var label = document.createElement("label");
        var radio = document.createElement("input");
        radio.type = "radio";
        radio.name = options[i].name;
        radio.value = options[i].value;
        label.appendChild(radio);
        label.appendChild(document.createTextNode(options[i].text));
        div.appendChild(label);

        //if we are on the last itteration there is no need to create another <br>
        if(i+1<options.length)div.appendChild(document.createElement('br'));
    }
    radio_home.appendChild(div);
}

已更新 demo