为什么变量传递“对象文本”而不是值？ [已关闭]

Question

我正在 for 循环中创建一个带有单选按钮的表。我正在尝试动态创建标签。我创建的变量将控制台记录预期值，上面一行是我将变量传递给创建的标签文本节点，但在页面上它打印出“对象文本”，而不是预期值。

function filter() {
  // Gets tool types for filter table
  // removeDuplicates function returns a Set, which is why I convert toolTypes to an Array here on the next line. 
  var toolTypes = removeDuplicates(tools);

 //types holds the values:
 // var types = ['Nut', 'Slot', 'Phillips', 'Torx'];

  var types = Array.from(toolTypes);
  // Add word 'All' to array
  types.splice(0, 0, 'All');

  var table = document.getElementById('tableFilter');
  var tr = document.createElement('tr');
  table.appendChild(tr);
  
  
  var td = [];
  var text = [];
  for(let i = 0; i < types.length; i++) {
    td[i] = document.createElement('td');
    text[i] = document.createTextNode(types[i]);
    // td[i].appendChild(text[i]);
    tr.appendChild(td[i]);

    
    // Create radio button
    var radioButton = document.createElement("input");
    // Set id of new radio button
    radioButton.setAttribute("type", "radio");
    // Set id of newly created radio button
    radioButton.setAttribute('id', 'radioType' + i);
    // Set unqiue group name of radio buttons
    radioButton.setAttribute('name', 'radioType');
    
    // Create label for Radio button row
    var lblRadioType = document.createElement('label');

     

// HERE IS INSERTION
    console.log(text[i]);
   // create text node for label text
    var textNodeRadioType = document.createTextNode(text[i]);

    // add text to newly created label
    lblRadioType.appendChild(textNodeRadioType);
    // Assign ID to label text
    lblRadioType.setAttribute('id', 'textRadioType' + i);
    
    // add radio button
    td[i].appendChild(radioButton);
    // add label text for radio button
    td[i].appendChild(lblRadioType);
    
    // add space between two radio buttons
    var space = document.createElement('span');
    space.setAttribute('innerHTML', '&nbsp;&nbsp');
    lblRadioType.appendChild(space);
  }
}

我尝试将变量声明移动到 for 循环内。我能想到的只是它在某种程度上超出了范围。

我希望它插入我的工具类型值（全部、螺母、槽、十字槽、Torx）。

它插入“对象文本”。

Answer 1

问题是 text[i] 是一个 Text 对象，而不是字符串值。当您将 text[i] 传递给 document.createTextNode() 时，它会使用 Text 对象的字符串表示形式创建一个新的文本节点，即“object Text”。

要解决此问题，您需要获取 Text 对象的 nodeValue 属性，其中包含实际的文本值。您可以通过更改行来做到这一点：

var textNodeRadioType = document.createTextNode(text[i]);

到

var textNodeRadioType = document.createTextNode(text[i].nodeValue);

这应该可以解决问题并将正确的文本值插入到标签中。