How to create an element with JavaScript, give it an ID, then create another element inside of it?

Question

I have created a new element with JavaScript using document.createElement() and I've appended it to the body using document.body.appendChild(). I want to create another element inside of this element inside of this element inside of this element. I know it can be done like this:

var firstElement = document.body.createElement('div');
var secondElement = document.body.cteateElement('div');
firstElement.appendChild(secondElement);
document.body.appendChild(firstElement);

But what if I don't want to append the second element to the first element immediately? What if I want to remove the element at a later time after some event? Wouldn't both elements need an ID?

I've created two functions, one to create the first element and one to create the second. I've then called them both:

function createFirstElement() {

};
function createSecondElement() {

};
createFirstElement();
createSecondElement();

inside of function createFirstElement(), I've created my first element, obviously! I've also styled it, given it an ID and appended it to the body:

function createFirstElement() {
    var firstElement = document.createElement('div');
    firstElement.id = 'firstElement';
    firstElement.style.width = '600px';
    firstElement.style.height = '400px';
    firstElement.style.backgroundColor = 'red';
    document.body.appendChild(firstElement);
};

This function works fine, a red <div> 600x400px is drawn in the browser. Now with createSecondElement(), I want to add another element inside of this element.

createElementTwo() is basically the same as createElementTwo(), except I want to create a new element inside of element one instead of the body:

function createElementTwo() {
    var firstElement = document.getElementById('firstElement');
    var elementTwo = document.createElement('div');
    elementTwo.id = 'elementTwo';
    elementTwo.style.width = '300px';
    elementTwo.style.height = '200px';
    elementTwo.backgroundColor = 'blue';
    firstElement.appendChild(elementTwo);
};

This does not work!

All together my code looks like this:

function init() {
    var body = document.body;

    function createFirstElement() {
        var firstElement = document.createElement('div');
        firstElement.id = 'firstElement';
        firstElement.style.width = '600px';
        firstElement.style.height = '400px';
        firstElement.style.backgroundColor = 'red';
        body.appendChild(firstElement);
    };
    function createElementTwo() {
        var firstElement = document.getElementById('firstElement');
        var elementTwo = document.createElement('div');
        elementTwo.id = 'elementTwo';
        elementTwo.style.width = '300px';
        elementTwo.style.height = '200px';
        elementTwo.backgroundColor = 'blue';
        firstElement.appendChild(elementTwo);
    };

    createFirstElement();
    createElementTwo();
};
init();

I've searched around online, but all I can find is how to create a new element, or add an element to an element that already exists in the HTML document.

What am I doing wrong?

Arun P Johny · Accepted Answer · 2015-07-03 05:51:16Z

2

It is fine, problem is in assigning background color to the second element - you has assigned backgroundColor to the dom element instead of assigning to its style

function init() {
  var body = document.body;

  function createFirstElement() {
    var firstElement = document.createElement('div');
    firstElement.id = 'firstElement';
    firstElement.style.width = '600px';
    firstElement.style.height = '400px';
    firstElement.style.backgroundColor = 'red';
    body.appendChild(firstElement);
  };

  function createElementTwo() {
    var firstElement = document.getElementById('firstElement');
    var elementTwo = document.createElement('div');
    elementTwo.id = 'elementTwo';
    elementTwo.style.width = '300px';
    elementTwo.style.height = '200px';
    elementTwo.style.backgroundColor = 'blue'; //here style was missed
    firstElement.appendChild(elementTwo);
  };

  createFirstElement();
  createElementTwo();
};
init();

answered Jul 3, 2015 at 5:51

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

Phil Over a year ago

@eddmcmxciii your browser's DOM inspector would have shown you the second element was actually being appended properly

eddmcmxciii Over a year ago

I didn't even think of that, thanks for the tip. I've tried accepting this answer, but apparently I have to wait 6 minutes.

Phil · Accepted Answer · 2015-07-03 05:55:33Z

1

I'd be inclined to return the created elements and pass the parent element in to createElementTwo so you don't have to worry about finding it by id. For example...

function createFirstElement() {
    // snip

    document.body.appendChild(firstElement);
    return firstElement;
}

function createElementTwo(firstElement) {
    var elementTwo = document.createElement('div');
    elementTwo.id = 'elementTwo';
    elementTwo.style.width = '300px';
    elementTwo.style.height = '200px';
    elementTwo.style.backgroundColor = 'blue'; // courtesy of Mr Johny
    firstElement.appendChild(elementTwo);
    return elementTwo;
}

createElementTwo(createFirstElement());

answered Jul 3, 2015 at 5:55

Phil

166k25 gold badges265 silver badges269 bronze badges

Collectives™ on Stack Overflow

How to create an element with JavaScript, give it an ID, then create another element inside of it?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related