如何使用javascript在单选按钮旁边添加文本

Question

我是 Javascript 新手。我有一个问题，如何使用 javascript 在单选按钮旁边自动添加文本。我有以下代码：

for (var index=0; index<4; index++)
    {
        var text = "Hello" + index;
        var name = 'RadioButton' + (index+1);
        var radioBut = document.createElement('input');
        radioBut.setAttribute('type', 'radio');
        radioBut.setAttribute('name', name);
        document.body.appendChild(radioBut);

        var newdiv = document.createElement('div');
        var divIdName = 'my'+index+'Div';
        newdiv.setAttribute('id',divIdName);
        document.body.appendChild(newdiv);
        newdiv.innerHTML = text;

    }

它打印单选按钮，但文本显然打印在下面。我必须做什么才能获得以下格式：RadioButton + Text？

Answer 1

Div 是块级元素，因此它会在新行上呈现。改用一些像 span 或 label 这样的内联元素：

for (var index = 0; index < 4; index++) {

  var text = "Hello" + index;
  var name = 'RadioButton'; // + (index + 1);
  var id = 'my' + index + 'Div';

  var row = document.createElement('div');
  document.body.appendChild(row);
  
  var radioBut = document.createElement('input');
  radioBut.setAttribute('type', 'radio');
  radioBut.setAttribute('name', name);
  radioBut.setAttribute('id', id);
  row.appendChild(radioBut);

  var label = document.createElement('label');
  label.setAttribute('for', id);
  label.innerHTML = text;
  row.appendChild(label);
}

使用label，您可以指定for 属性，该属性将指向相应的输入元素，这对用户体验很有好处。另请注意，为单选按钮提供相同的名称是有意义的。