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属性，该属性指向相应的输入元素，这对UX有用。另请注意，为单选按钮指定相同的名称是有意义的。

Answer 2

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);
}

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

2 个答案: