0

我正在学习如何编写面向对象的 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');
4

3 回答 3

4

您的代码完美运行，恭喜。

你根本看不到没有样式的空 div。

请参阅此处的样式演示：

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;
    };
}

示范

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

于 2013-01-03T15:42:43.060 回答
0

正在创建 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);
于 2013-01-03T15:46:21.423 回答
0

在设置文本内容时添加了与 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');

你可以用这个 jsfiddle 试试。

于 2013-01-03T16:16:39.053 回答