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

How to create a simple DOM element within a constructor and append it to an element on invocation

本文关键字：元素 调用 DOM 简单 创建 构造函数 一个      更新时间：2023-09-26

注释应该是不言自明的。我只想在构造函数中创建一个元素，并在用它创建对象时将其附加到DOM中

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

DomItem构造函数中的button是undefined，因为您没有传入第三个button参数。任何未传递的命名参数都将被分配值undefined。

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

使用this.button引用在构造函数中创建的按钮。

app.appendChild(this.button);

请注意，下面代码中的this.button并没有引用第三个button参数，而是引用了this的属性button，在调用构造函数时，该属性始终是未定义的。

if(typeof this.button ==='undefined') {
    this.button = document.createElement('div');
}
相关文章：