点击按钮后无法显示input元素的问题排查

你的核心问题出在用innerHTML +=拼接DOM元素对象上：trackFileInput是通过createElement创建的DOM元素实例，不是字符串，直接拼接到innerHTML里会被强制转换成字符串[object HTMLInputElement]，自然看不到实际的input元素。

正确的实现方式 #

推荐用标准的DOM操作方法appendChild，这是最可靠的插入元素方式：

function addSong() {
  const additionDiv = document.getElementById('track-controls');
  const trackFileInput = document.createElement('input');
  // 如果你需要的是文件选择框，记得加上type属性，否则默认是文本输入框
  trackFileInput.type = 'file';
  // 插入元素到目标div中
  additionDiv.appendChild(trackFileInput);

  // 补充：你直接取trackFileInput.value是拿不到用户选择的文件的
  // 因为input刚创建，用户还没操作，需要监听change事件获取文件
  trackFileInput.addEventListener('change', function() {
    console.log('file saved: ' + this.value);
  });
}

为什么之前的innerHTML方式不行 #

innerHTML只能接收HTML格式的字符串，如果你非要用这种方式，需要手动写HTML字符串而不是DOM对象：

// 不推荐此方式，因为会重新解析容器内的所有HTML，可能丢失已有事件绑定
additionDiv.innerHTML += '<input type="file">';

但这种方式创建的input，你无法直接拿到它的DOM引用，后续要加事件监听还得重新查询，远不如appendChild高效灵活。

额外提醒 #

如果你之前尝试appendChild没看到效果，可能是input默认是文本类型，和页面样式融合导致没注意到，给input加上type="file"或者设置一些样式（比如border: 1px solid #000）就能直观看到元素了。

内容的提问来源于stack exchange，提问作者colonialempire4