JavaScript文本節點

Question

試圖在javaScript中創建基本測驗。我的下面的代碼似乎只輸出單選按鈕，而不是隨附的標籤。爲什麼是這樣？這裏有完整的fiddle。謝謝

while(i<length){ 
    var radioBtn = document.createElement("input"); 
    var label = document.createElement("label"); 
    radioBtn.setAttribute('type','radio'); 
    radioBtn.id = i; 
    label.appendChild(document.createTextNode(data[0].choices[i])); 
    radioBtn.appendChild(label); 
    form.appendChild(radioBtn); 
i++ 
} 

Answer 1

您試圖將標籤放入輸入。輸入不能有子節點。

你想把輸入放在標籤內。

這是你的目標應該是什麼：

<label> 
    <input type="radio"> 
    Hello 
</label> 

這是你的代碼是試圖做：

<input type="radio"> 
    <label> 
     Hello 
    </label> 
</input> 

變化：

label.appendChild(document.createTextNode(data[0].choices[i])); 
radioBtn.appendChild(label); 
form.appendChild(radioBtn); 

到

label.appendChild(radioBtn); 
label.appendChild(document.createTextNode(data[0].choices[i])); 
form.appendChild(label); 

Answer 2

您正在追加<label>到<input>，它應該是相反的方式。這裏有一個更新的plunkr：

http://jsfiddle.net/kkyoc251/

Answer 3

while(i<length){ 
    var radioBtn = document.createElement("input"); 
    var label = document.createElement("label"); 
    radioBtn.setAttribute('type','radio'); 
    radioBtn.id = i; 
    label.appendChild(radioBtn); // Append radio button to the label 
    label.appendChild(document.createTextNode(data[0].choices[i])); // Add a text 
    form.appendChild(label); // Append to the form 

    i++; 
} 

或可選擇地追加label作爲兄弟的單選按鈕，然後使用label元素的for財產。通過這種方式label相對於單選按鈕的位置並不重要。

label.setAttribute('for', radioBtn.id); 

Answer 4

change radioBtn.appendChild（label）; form.appendChild（label）;

while(i<length){ 
    var radioBtn = document.createElement("input"); 
    var label = document.createElement("label"); 
    radioBtn.setAttribute('type','radio'); 
    radioBtn.id = i; 
    label.appendChild(document.createTextNode(data[0].choices[i])); 
    form.appendChild(label); 
    form.appendChild(radioBtn); 
i++ 
}