javascript - 使用面向对象的 javascript 创建新元素

Question

我正在学习如何编写面向对象的 JavaScript。我有一个简单的类来创建 div 元素，但是当我测试代码时，没有创建新元素。我这样做正确吗？我正在使用以下代码:

function elementCreation(elementParent, elementId, elementText) {
    this.elementParent = document.getElementsByTagName(elementParent)[0];
    this.elementId = elementId;
    this.elementHtml = elementText;
    this.elementMake = function (type) {
        newElement = document.createElement(type);
        // add new element to the dom
        this.elementParent.appendChild(newElement);
    };
}

var newObject = new elementCreation('body', 'testdiv', 'some text here!!!');
newObject.elementMake('div');

Answer 1

恭喜您的代码运行良好。

如果没有样式，您根本看不到空 div。

参见here a demonstration with styling :

div {
 width:100px;
 height:100px;
 background-color:red;   
}​

请注意，如果您的构造参数用于构造子元素，则必须将它们投入使用。例如:

function elementCreation(elementParent, elementId, elementText) {
    this.elementParent = document.getElementsByTagName(elementParent)[0];
    this.elementId = elementId;
    this.elementHtml = elementText;
    this.elementMake = function (type) {
        newElement = document.createElement(type);
        // add new element to the dom
        this.elementParent.appendChild(newElement);
        newElement.innerHTML = elementText;
    };
}

Demonstration

我不会尝试使用 elementId 参数:如果您定义一个函数，它可能会多次调用它，并且 id 不能在 HTML 中多次使用。