Empty is not a function

document.getElementById('btnGetExistingFiles').onclick = function(){
var ul = document.getElementById('listExisting');
    //we split the files in a array
    var existingFiles = "a.yml b.yml c.yml d.yml".split(" ");

    //if the list already contains some values we remove them
    if(ul.hasChildNodes()){
      ul.empty();
    }

    //for each file we add an element in the list
    existingFiles.forEach(function(fileName) {
      console.log("add files");
      var li = document.createElement("li");
      var a = document.createElement("a");
      a.setAttribute("href", "#");
      a.setAttribute("class", "oneExistingFile");
      a.appendChild(document.createTextNode(fileName))
      li.appendChild(a);
      ul.appendChild(li);
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
        <button id="btnGetExistingFiles" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu" id="listExisting">
        </ul>
      </div>