如何使用javascript在同一行中制作单选按钮和标签答案

【问题标题】：How to make radio button and label in the same line using javascript如何使用javascript在同一行中制作单选按钮和标签
【发布时间】：2020-09-24 22:59:14
【问题描述】：

我正在尝试通过 javascript 动态添加单选按钮，因为单选按钮的数量是在运行时确定的。当我创建这样的单选按钮时，单选按钮会显示在标签顶部。但我希望标签显示在单选按钮旁边。下面是javascript代码。

  x = matchInfoArray[0];
  var values = [x.team1, x.team2];

  var selecttag1=document.createElement("input");
  selecttag1.setAttribute("type", "radio");
  selecttag1.setAttribute("name", "match1");
  selecttag1.setAttribute("value", values[0]);
  selecttag1.setAttribute("id","match1");
  var lbl1 = document.createElement("label");
  lbl1.innerHTML = values[0];
  div = document.getElementById("poll-content");
  div.appendChild(selecttag1);
  div.appendChild(lbl1);
  
  selecttag1=document.createElement("input");
  selecttag1.setAttribute("type", "radio");
  selecttag1.setAttribute("name", "match1");
  selecttag1.setAttribute("value", values[1]);
  selecttag1.setAttribute("id","match1");
  lbl1 = document.createElement("label");
  lbl1.innerHTML = values[1];
  div = document.getElementById("poll-content");
  div.appendChild(selecttag1);
  div.appendChild(lbl1);

'poll-content'是一个div，css如下。

 .poll-content input[type="button"]
{
    border: none;
    margin-top: 100px;
    outline: none;
    height: 30px;
    width: 250px;
    background: #fb2525;
    color: #fff;
    font-size: 18px;
    border-radius: 20px;
}

谁能帮我通过javascript解决这个问题。

【问题讨论】：

你能发一个minimal reproducible example吗？ 元素 x 显示在元素 Y 的顶部而不是旁边，很多事情都可能导致这种情况。 display:block;、伪元素等等等等。一个可重现的例子会有很大帮助。
很难想象你在做什么。请做一个sn-p stackoverflow.com/help/minimal-reproducible-example
从我的脑海中，尝试：lbl1.appendChild(selecttag1); div.appendChild(lbl1);。让我知道它是否有帮助/有效。
selecttag1.setAttribute("id","match1"); 上的错误（2 次）-> id 必须是唯一的！
@iAmOren：非常感谢。它确实奏效了。你能把这个作为答案发布吗？

标签： javascript html

【解决方案1】：

对于这种代码，我更喜欢使用 DOMParser，它可以让我对结果有把握，而且代码更干净，更容易纠正或维护。

const DomParser   = new DOMParser()
  ,   pollContent = document.getElementById("poll-content")
  ;
function makeLabelInput( val, no)
  {
  let Elms = `
    <label> ${val}
      <input type="radio" name="match${no}" value="${val}">
    </label>
  `
  return (DomParser.parseFromString( Elms, 'text/html')).body.firstChild
  }


const matchInfoArray = [ { team1: 'team1', team2:'team2' }]
let indx = 0

pollContent.appendChild( makeLabelInput( matchInfoArray[indx].team1, indx) )
pollContent.appendChild( makeLabelInput( matchInfoArray[indx].team2, indx) )

#poll-content label {
  margin-right: .5em;
  outline: none;
  padding: .2em .3em .2em .8em;
  background: #fb2525;
  color: #fff;
  border-radius: 1em;
  }
#poll-content input[type=radio] {
  transform: translateY(.2em);
}

&lt;div id="poll-content"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

毫无疑问，乔乔先生的答案很有效，并且可能是这里的正确答案。但是，我想指出的是，您基本上可以用更少的努力获得类似的结果：

const matchInfoArray = [ { team1: 'team1', team2:'team2' }];

document.getElementById("poll-content").innerHTML+=
  Object.values(matchInfoArray[0]).map(val=>
  `<label> ${val}
      <input type="radio" name="match0" value="${val}">
   </label>`).join("");

#poll-content label {
  margin-right: .5em;
  outline: none;
  padding: .2em .3em .2em .8em;
  background: #fb2525;
  color: #fff;
  border-radius: 1em;
  }
#poll-content input[type=radio] {
  transform: translateY(.2em);
}

&lt;div id="poll-content"&gt;&lt;/div&gt;

在我的版本中，我直接将 HTML 附加到目标元素的现有 HTML 中。这可能具有从目标中已经存在的子级解除绑定事件的不良影响。但是，如果您没有在它们上使用任何直接附件绑定，那么这种方法是创建相关元素的快速简便的方法。在上面的 sn-p 中，我跳过了 indx 的参数化并将其硬编码为 0，因为似乎只有这个索引存在，但您当然也可以用 .map() 将表达式包装在所有 @ matchInfoArray 元素中的 987654327@。

【讨论】：