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

Question

I am trying to add radio buttons through javascript dynamically as the number of radio buttons is determined run time. When I create radio buttons like this, radio button is getting displayed on top of label. But I want label to be displayed next to the radio button. Below is the javascript code.

  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' is a div and css is as below.

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

Can any one please help me how to fix this issue through javascript.

Answer 1

for this kind of code, I prefer to use the DOMParser, it allows me to be sure of the result, and the code is cleaner, easier to correct or maintain.

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

 <div id="poll-content"></div>

Answer 2

No doubt, Mr Jojo's answer works and is probably the right answer here. However, I would like to point out that you can basically achieve a similar result with much less effort:

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

 <div id="poll-content"></div>

In my version I directly append the HTML to the already existing HTML of the target element. This can have the undesired effect of unbinding events from already existing children in the target. But, in case you have not used any direct attachment bindings on them then this method is a fast and easy way of creating the elements in question. In the above snippet I skipped the parametrisation of indx and hard coded it as 0 , as only this index seems to exist, but you can of course just as well wrap the expression with a .map() over all indx of the matchInfoArray elements.