为什么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函数中返回时返回元素的内容？

回答

相关问题