克隆HTML元素与使用Javascript创建它

Question

我通过ajax请求获取员工列表。然后，我创建了一堆带有名称地址电话等的div。这些新元素还有一些提供功能的按钮。我一直在使用这种方法：

var Employee = function(params) {
  this.name = params.name;
  this.hrid = params.hrid;

  this.initialize = function() {
    this.container = document.createElement('div');
    this.contName = document.createElement('div');
    this.contHRID = document.createElement('div');
    this.myButton = document.createElement('button');

    this.contName.innerHTML = this.name;
    this.contHRID.innerHTML = this.hrid;
    this.container.appendChild(this.contName);
    this.container.appendChild(this.contHRID);
    this.container.appendChild(this.myButton);

    this.addObservers();
  }

  this.addObservers = function() {
    this.myButton.observer = this.dostuff.bind(this);
    this.myButton.addEventListener('click', this.myButton.observer);
  }

  this.dostuff = function() {
    // do stuff
  }
}

这种方法对我来说效果很好，但是我想知道如果用已经构建的HTML创建一个隐藏的div并且克隆它会更好。

我非常希望听到一些关于哪种方法更好的想法，或者它是否属于六种类型的情况。