Is it possible to appendChild from one function to a parent of another?

I’m trying to simulate a directory tree creation. The tree must include the files a user uploads in it. Something like this

Directory: (Add Directory)(Add File)

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

I’ve found a way to simulate the directory tree but I’m having problems with adding the uploaded files. I’m new to Javascript so not sure how to go about this.

I created a function for tree generating and a separate function for uploading the files. I’d like the file browsing to start when the (Add File) button is clicked. Here’s my code:

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

}

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

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

Making ‘subdirectory’ variable global doesn’t really work. GetElementbyId doesn’t work here either as the id changes with each branch. Is there a way to ‘append’ the ‘add_files’ function’s variable ‘file_upload’ as a child to the ‘subdirectory’ parent?