如何使用javascript在同一行中制作單選按鈕和標簽

Question

我正在嘗試通過 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解決這個問題。

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

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

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

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

在我的版本中，我直接將 HTML 附加到目標元素的現有 HTML。 這可能會產生從目標中已經存在的子項解除綁定事件的不良影響。 但是，如果您沒有對它們使用任何直接附件綁定，那么此方法是創建相關元素的一種快速簡便的方法。 在上面的代碼中我忽略的參數化indx和硬編碼它作為0 ，因為只有這個指標似乎存在，但你當然可以一樣好了包裹式.map()在所有indx的的matchInfoArray元素。