Question

I’m reading a book on JavaScript that’s appending divs to other divs, and I just wanted to get a visual on what that actually looks like. i.e. is the appended div contained within that div it’s appended to, or is it just added below it. Anyways, to figure this out, I created this fiddle which doesn’t work http://jsfiddle.net/mjmitche/S4e4r/, where I try to append a div to another already existing div. Can you please explain why I can’t get class ‘son’ appended to id ‘dad’?

JavaScript

var element = document.createElement('div');
element.className = 'son';
var dad = getElementById('dad');
dad.appendChild(tit); 

html

<div id="dad">

</div>

css

.son{

    background-color: red;
    width: 100px;
    height: 100px;

}


#dad{

    width: 100px;
    height: 100px;
    background-color: green;

}

Answer 1

Method getElementById() exists in document object:

var dad = document.getElementById("dad");
dad.appendChild(element);  // use 'element' instead of undefined 'tit`

​
DEMO: http://jsfiddle.net/S4e4r/1/