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!!

Answer: 
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.
The className property refers to the class attribute of an HTML element.