Create and change HTML elements in Javascript

Question

I have a HTML like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

    <div id='first'>
        <div id='second'>
            <div id='third'>

            </div>
        </div>
    </div>

</body>
</html>

I also have some Javascript code like this:

var element = document.createElement('div');
element.id = 'forth';
var parent = document.getElementById('third');
parent.appendChild(element);

When I run the javascript code, the HTML should change to:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

    <div id='first'>
        <div id='second'>
            <div id='third'>
                <div id='forth'></div>
            </div>
        </div>
    </div>

</body>
</html>

Then after I typed this line below in the Browser's console:

element.className = 'test';

What I hope is that only the variable 'element' in Javascript will change and have the class name 'test'. However, when I check my current HTML it also have the class name 'test':

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

    <div id='first'>
        <div id='second'>
            <div id='third'>
                <div id='forth' class='test'></div>
            </div>
        </div>
    </div>

</body>
</html>

Can anybody explain that? Thanks so much!!

Your global variable was still pointing to the newly created div. — user2417483
– user2417483, Commented Sep 21, 2014 at 20:25
The element variable is a Javascript reference to that <div>. When you set its class name to test, the <div> pointed to by that variable gets a class name of test. What were you expecting? — Shai
– Shai, Commented Sep 21, 2014 at 21:45

Dima Slivin · Accepted Answer · 2014-09-22 07:35:48Z

3

When you assign a value to the variable 'element' like you do:

var element = document.createElement('div');

'element' becomes a pointer to the newly created div. Every time you reference 'element' variable, you actually reference the 'div' object, which 'element' points to. So when you do:

element.className = 'test';

you assign the class name to your div, not to some abstract variable. Since you have appended your div to HTML DOM:

parent.appendChild(element);

you can immediately see the changes in your html code.

However if you assigned a new value to the 'element' variable, like this:

element = document.createElement('p');

the variable 'element' would stop pointing to div object and start pointing to the newly created p object. From this point all methods applied to 'element' would affect a 'p' object.

edited Sep 22, 2014 at 7:35

answered Sep 22, 2014 at 5:26

Dima Slivin

63910 silver badges19 bronze badges

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

Comments

Jukka K. Korpela · Accepted Answer · 2014-09-21 21:32:00Z

0

Elements in the DOM do not have classes in any other sense than possibly having a className property, either from a JavaScript assignment or from a class attribute in HTML markup. When you are looking at “your HTML” in a browser, it actually shows the DOM as linearized to HTML markup. This means, in particular, that if an element node has the property className, the element is shown as having the class attribute. This is effectively described in HTML5 CR in the description of the class attribute. It means that setting the className property (“IDL attribute” in HTML5 parlance) also sets the class attribute (“content attribute”).

answered Sep 21, 2014 at 21:32

Jukka K. Korpela

203k38 gold badges282 silver badges408 bronze badges

Comments

Geoffrey · Accepted Answer · 2014-09-21 20:26:28Z

-1

The className property refers to the class attribute of an HTML element.

answered Sep 21, 2014 at 20:26

Geoffrey

5,42910 gold badges49 silver badges81 bronze badges

Collectives™ on Stack Overflow

Create and change HTML elements in Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related