なぜhtmlElementは、javascript関数で返された場合にのみ、要素の内容を返しますか？

Question

名前と3つのラジオボタンを含むタブを動的に作成しようとしています。出力は次のようになります。

私は、TDを作成するための関数を使って入力を含むラベルを含むていますJavaScriptで

<tr> 
    <td>Jane Doe</td> 
    <td><label class="radio-inline" id="foo"><input type="radio" name="bar"></label></td> 
    <td><label class="radio-inline" id="foo"><input type="radio" name="bar"></label></td> 
    <td><label class="radio-inline" id="foo"><input type="radio" name="bar"></label></td> 
</tr> 

：

function createRadioTdElement(naam, value){ 
    var radioTdElement = document.createElement('TD'); 
    var labelElement = createLabelElement(value); 
    var radioElement = createRadioElement(naam); 
    labelElement.appendChild(radioElement); 
    return radioTdElement.appendChild(labelElement); 
} 

function createLabelElement(value){ 
    var labelElement = document.createElement('label'); 
    labelElement.className = 'radio-inline'; 
    labelElement.id = value; 
    return labelElement; 
} 

function createRadioElement(naam) { 
    var inputElement = document.createElement('input'); 
    inputElement.type = 'radio'; 
    inputElement.name = naam; 
    return inputElement; 
} 

しかし、私はTR要素に付加するために、この関数を呼び出すとき：

eTR.appendChild(createRadioTdElement(naam, value)); 

createRadioTdElementのみを返します。

<label class="radio-inline" id="foo"><input type="radio" name="bar"></label> 

を

なぜそれがのような「TD」タグでそれを返さない：

<td><label class="radio-inline" id="foo"><input type="radio" name="bar"></label></td> 

Answer 1

コメントは質問に答えたが、私は完全のために実施例を記述すると考えました。

Kevinは、appendChildは、親ではなく、子を返すと述べています。だから、私が下でコメントした<td>要素を返すとします。

さらに、id属性は一意である必要があります。そこで、下の例のidも変更しました。

function createRadioTdElement(naam, value){ 
 
    var radioTdElement = document.createElement('TD'); 
 
    var labelElement = createLabelElement(value); 
 
    var radioElement = createRadioElement(naam); 
 
    labelElement.appendChild(radioElement); 
 
    radioTdElement.appendChild(labelElement); 
 
    return radioTdElement; // return td element 
 
} 
 

 
function createLabelElement(value){ 
 
    var labelElement = document.createElement('label'); 
 
    labelElement.className = 'radio-inline'; 
 
    labelElement.id = value; 
 
    return labelElement; 
 
} 
 

 
function createRadioElement(naam) { 
 
    var inputElement = document.createElement('input'); 
 
    inputElement.type = 'radio'; 
 
    inputElement.name = naam; 
 
    return inputElement; 
 
} 
 

 
var td = createRadioTdElement('bar', 'four'); 
 
var tr = document.querySelector('tr'); 
 
tr.appendChild(td);

<table> 
 
    <tr> 
 
    <td>Jane Doe</td> 
 
    <td><label class="radio-inline" id="one"><input type="radio" name="bar"></label></td> 
 
    <td><label class="radio-inline" id="two"><input type="radio" name="bar"></label></td> 
 
    <td><label class="radio-inline" id="three"><input type="radio" name="bar"></label></td> 
 
    </tr> 
 
</table>