如何以面向对象的方式创建DOM元素？ [重复]

Question

这个问题已经在这里有了答案：

• 我可以继承DOM类吗？ 4个答案

我知道您可以使用以下方法创建任何元素，例如“ a”标签

document.createElement('a')

您如何以更加面向对象的方式设计它？ 这是正确的方法吗？

function Button(){
  this.style.tagName = 'a';
  this.setAttribute('href', some_link);
  this.style.padding = '10px';
}

var pinkButton = new Button();
pinkButton.style.backgroundColor = 'pink';

document.getElementById('blah').appendChild(pinkButton)

并将其显示在页面上，元素ID为'blah'

Answer 1

如果您基本上想对按钮进行子类型化，则可以执行以下操作

var customButtonFactory = function(bgColor){
  var button = document.createElement("button");
  button.style.background = bgColor;
  //do all the other custom styling you want for the button
  return button;
}

这取决于onclick函数的不同之处，您可以传入一些参数以在工厂内部构建函数...或者您可以直接将函数作为参数传入。