creating new elements using object oriented javascript

Question

I am learning how to write object oriented javascript. I have a simple class to create div elements, but when I test the code no new elements are created. Am I doing this correctly? I am using the following code:

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

Denys Séguret · Accepted Answer · 2013-01-03 15:48:05Z

4

Your code works perfectly, congratulations.

You simply can't see an empty div without styling.

See here a demonstration with styling :

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

Note that if your construction parameters were intended for the construction of the child element, you have to put them to some use. For example :

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

I won't try to use the elementId parameter : if you define a function, it's probably to call it more than once and an id can't be used more than once in HTML.

edited Jan 3, 2013 at 15:48

answered Jan 3, 2013 at 15:42

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Daniel Over a year ago

oh ok i see now that it created the div, but how do I apply the id and the text? 'testdiv', 'some text here!!!' did show.

Lee Taylor Over a year ago

I think the OP is expecting/hoping that the supplied text be rendered in the DIV (some text here!!!)

MrCode Over a year ago

The code doesn't work quite perfectly, because it doesn't set the element HTML or ID.

Denys Séguret Over a year ago

@MrCode Both of your concerns were addressed in my answer long before your comment. Please refresh this page.

MrCode · Accepted Answer · 2013-01-03 15:46:21Z

0

The div is being created but you aren't setting it's content as your third argument 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);

answered Jan 3, 2013 at 15:46

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Comments

Frederik.L · Accepted Answer · 2013-01-03 16:16:39Z

Added compatibility with firefox when setting text content, then associated the id attribute to the new element. I also tried another approach that could be easier to complexify.

What about:

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

You can try it with this jsfiddle.

Collectives™ on Stack Overflow

creating new elements using object oriented javascript

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related