如何在目录树模拟中跨函数实现appendChild添加文件？

问题场景 #

我正在模拟目录树创建，需要让每个目录下能添加上传文件，预期效果如下：

Directory:            (Add Directory)(Add File)

  (browse) Uploaded_file.png

Directory:            (Add Directory)(Add File)

       Directory:            (Add Directory)(Add File)

        (browse) Uploaded_file.png

        (browse) Uploaded_file.png

目前已经实现目录树的生成，但点击(Add File)按钮时，无法将文件上传控件添加到对应的目录下。尝试过全局变量和getElementById都不行，因为每个目录的ID是动态生成的。

现有代码 #

HTML #

<!DOCTYPE html>
<html>

<head>
  <title>Adding HTML elements dynamically</title>
</head>

<body>

  <h1>Directory tree simulator</h1>

  <div id="level_0_0">

  </div>

  <div>
    <button onclick="add_directory(this)" what_branches="0_0" what_level="0">Add Directory</button>
  </div>

</body>

CSS #

div {
  padding: 10px;
  margin: 5px;
}

JavaScript #

function add_directory(current) {

  var chosen_branches_of_level = current.getAttribute('what_branches');
  var chosen_level = parseInt(current.getAttribute('what_level'));
  var same_level_branches = document.getElementsByClassName('class_level_' + (chosen_level + 1));
  same_level_branches = same_level_branches.length;
  var where_to = document.getElementById('level_' + chosen_branches_of_level);
  var subdirectory = document.createElement('div');
  var subdirectory_id = (chosen_level + 1) + '_' + (same_level_branches + 1);
  subdirectory.id = 'level_' + subdirectory_id;
  subdirectory.className = 'sub';
  subdirectory.setAttribute('class', 'class_level_' + (chosen_level + 1));

  where_to.appendChild(subdirectory);

  var label = document.createElement("label");
  label.name = 'where' + subdirectory_id;
  label.innerText = "Directory: ";
  subdirectory.appendChild(label);

  var input = document.createElement('input');
  input.name = 'where' + subdirectory_id;
  input.placeholder = 'Subdirectory';

  subdirectory.appendChild(input);

  var new_button_dir = document.createElement('button');
  new_button_dir.setAttribute('onclick', "add_directory(this)");
  new_button_dir.setAttribute('what_branches', subdirectory_id);
  new_button_dir.innerText = 'Add Directory';

  subdirectory.appendChild(new_button_dir);

  var new_button_files = document.createElement('button');
  new_button_files.setAttribute('onclick', "add_files()");
  new_button_files.setAttribute('what_branches', subdirectory_id);
  new_button_files.innerText = 'Add Files';

  subdirectory.appendChild(new_button_files);

  var file_upload = document.createElement("INPUT");
  file_upload.setAttribute("type", "file");
}

function add_files() {
  var file_upload = document.createElement("INPUT");
  file_upload.setAttribute("type", "file");
  subdirectory.appendChild(file_upload);

}

解决方法 #

核心思路是把点击的按钮自身传递给add_files函数，通过按钮上的what_branches属性找到对应的目录元素，再将文件上传控件添加进去。

修改后的JavaScript代码 #

function add_directory(current) {

  var chosen_branches_of_level = current.getAttribute('what_branches');
  var chosen_level = parseInt(current.getAttribute('what_level'));
  var same_level_branches = document.getElementsByClassName('class_level_' + (chosen_level + 1));
  same_level_branches = same_level_branches.length;
  var where_to = document.getElementById('level_' + chosen_branches_of_level);
  var subdirectory = document.createElement('div');
  var subdirectory_id = (chosen_level + 1) + '_' + (same_level_branches + 1);
  subdirectory.id = 'level_' + subdirectory_id;
  // 合并class设置，避免覆盖原有样式类
  subdirectory.className = 'sub class_level_' + (chosen_level + 1);

  where_to.appendChild(subdirectory);

  var label = document.createElement("label");
  label.name = 'where' + subdirectory_id;
  label.innerText = "Directory: ";
  subdirectory.appendChild(label);

  var input = document.createElement('input');
  input.name = 'where' + subdirectory_id;
  input.placeholder = 'Subdirectory';

  subdirectory.appendChild(input);

  var new_button_dir = document.createElement('button');
  new_button_dir.setAttribute('onclick', "add_directory(this)");
  new_button_dir.setAttribute('what_branches', subdirectory_id);
  new_button_dir.innerText = 'Add Directory';

  subdirectory.appendChild(new_button_dir);

  var new_button_files = document.createElement('button');
  // 修改onclick，传递按钮自身到add_files函数
  new_button_files.setAttribute('onclick', "add_files(this)");
  new_button_files.setAttribute('what_branches', subdirectory_id);
  new_button_files.innerText = 'Add Files';

  subdirectory.appendChild(new_button_files);
}

function add_files(button) {
  // 从按钮获取绑定的目录ID
  var subdirectoryId = button.getAttribute('what_branches');
  var subdirectory = document.getElementById('level_' + subdirectoryId);
  
  // 创建带缩进的容器，匹配示例显示效果
  var fileContainer = document.createElement('div');
  fileContainer.style.marginLeft = '20px';
  
  var file_upload = document.createElement("INPUT");
  file_upload.setAttribute("type", "file");
  
  fileContainer.appendChild(file_upload);
  subdirectory.appendChild(fileContainer);
}

关键修改点 #

1. 传递按钮引用：将Add Files按钮的onclick改为add_files(this)，把按钮对象传递给函数，从而获取到按钮上绑定的目录ID。
2. 定位目标目录：在add_files中，通过按钮的what_branches属性拼接出目录的ID，用getElementById精准找到对应的目录元素。
3. 样式优化：给文件上传控件添加外层div并设置左缩进，让显示效果和示例一致。
4. 修复class设置：原代码中用setAttribute('class')覆盖了之前设置的sub类，现在合并为className = 'sub class_level_' + ...，保留所有样式类。

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