Question

我正在尝试动态创建包含名称和三个单选按钮的表格。输出应为：

<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>

Answer 1

评论回答了这个问题，但我想我会写一个完整性的工作示例。

Kevin提到appendChild返回附加的子节点，而不是父节点。所以你想要返回我在下面评论过的<td>元素。

此外，id属性应该是唯一的。所以我也在下面的例子中更改了id。

＆＃13;

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

＆＃13;

<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>

＆＃13;

为什么htmlElement只在javascript函数中返回时返回元素的内容？

1 个答案: