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参数：如果您定义了一个函数，它可能会多次调用它，并且在HTML中不能多次使用id。

Answer 2

正在创建div，但您没有将其内容设置为第三个参数elementText。

    newElement = document.createElement(type);
    newElement.innerHTML = this.elementHtml; // <-- set its content
    newElement.id = this.elementId; // <-- set the ID
    // add new element to the dom
    this.elementParent.appendChild(newElement);

Answer 3

在设置文本内容时添加了与firefox的兼容性，然后将id属性与新元素相关联。我还尝试了另一种可以更容易复杂化的方法。

怎么样：

function elementCreation(args) {
    this.parent = args.parent;
    this.id = args.id;
    this.text = args.text;

    this.make = function(type) {
        var el = document.createElement(type);
        el.id = this.id;

        // firefox do not support innerText, some others do not support textContent
        if (typeof el.innerText != "undefined") {
            el.innerText = this.text;
        } else {
            el.textContent = this.text;
        }

        this.parent.appendChild(el);
    }
}

new elementCreation({
    parent: document.body,
    id: 'div1',
    text: 'some text here!!!'
}).make('div');

您可以尝试with this jsfiddle。

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

3 个答案: