如何在构造函数中创建一个简单的DOM元素，并将其附加到调用元素

Question

The comments should be self explanatory. I simply want to create an element in a constructor and have it appended to the DOM when an object is created with it.

<div id="app">

</div>

Javascript

function DomItem(name,buttonName,button){ 

if(typeof(this.button)==='undefined') {
    this.button  =   document.createElement('div');
};

this.buttonName = buttonName;
this.button.className = buttonName;
this.button.id = name +"_ " +buttonName;
var app = document.getElementById("app");   //Works!
console.log(app);                          // Works!
app.appendChild(button);                  // Problem ~~~~~~~~~~~~~~~




};



osc = new DomItem('osc','button');

Answer 1

button within the DomItem constructor function is undefined since you are not passing in the third button parameter. Any named parameter that isn't passed is assigned the value undefined .

osc = new DomItem('osc','button'/*, button parameter missing*/);

Use this.button to refer to the button created within the constructor.

app.appendChild(this.button); 

Note that this.button in the below code doesn't refer to the third button argument but to a property button of this , which will always be undefined on calling the constructor.

if(typeof this.button ==='undefined') {
    this.button = document.createElement('div');
}