爲什麼htmlElement只在javascript函數中返回時返回元素的內容？

我想動態創建一個包含名稱和三個單選按鈕的tabel。輸出應該是：爲什麼htmlElement只在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>

在JavaScript中我使用功能來創建TD，含有包含輸入標籤：

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>

來源

2017-06-05 I.Brok

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild *返回的值是**附加的孩子***，不父母。 –

''在函數中添加標籤後返回radioTdElement'。 – wostex

對不起。我不明白爲什麼這與appendChild有關？如果我把所有這些行放在一起，而不是將它分割成函數，它可以正常工作。它在return語句中丟失了「td」標籤。只返回radioTdElement並將其從appendChild函數中分離不起作用。它仍然丟失TD標籤。 –

的意見回答了這個問題，但我想我會寫完整的工作示例。

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>

來源

2017-06-06 13:18:38 styfle

爲什麼htmlElement只在javascript函數中返回時返回元素的內容？

回答

相關問題