Load different content onclick of different controls

I am trying to load different content onclick of different button controls. Since I am new to JavaScript and don’t know where I am doing wrong.

It will be highly appreciated if there is any help from any one of you!

The code of which is here:

 (function () {

        var getText = document.getElementById('text'),
            getSmallImage = document.getElementById('smallimage'),
            getLargeImage = document.getElementById('largeimage');

        function ChangeState(event) {

            var myDiv = document.createElement('div');
            myDiv.className = 'dynamicDiv';
            document.body.appendChild(myDiv);

            //style the div
            var a = document.getElementsByClassName('dynamicDiv')
            for (var i in a) {

                a[i].style.width = '400px';
                a[i].style.height = '400px';
                a[i].style.color = 'rgb(255,255,0)';
                a[i].style.background = 'rgb(0,102,153)';
                a[i].style.padding = '10px';
            }

            if (event.target.id == getText) {
                myDiv.appendChild(document.createTextNode('This is my div'));
            }

            else if (event.target.id == getSmallImage) {
                var smallImage = document.createElement('img');
                smallImage.src = 'Images/smallimage.jpg';

                myDiv.appendChild(smallImage);
            }
            else if (event.target.id == getLargeImage) {
                var largeImage = document.createElement('img');
                largeImage.src = 'Images/largeimage.jpg';

                myDiv.appendChild(largeImage);
            }
        }

        getText.addEventListener('click', ChangeState, false);
        getSmallImage.addEventListener('click', ChangeState, false);
        largeimage.addEventListener('click', ChangeState, false);
    }
   ());

and the HTML code is here:

<input id="text" type="button" value="Click to load Text" />
<input id="smallimage" type="button" value="Click to load Small Image" / />
<input id="largeimage" type="button" value="Click to load Large Image" />

and same code is on jsfiddler as well:

http://jsfiddle.net/shabirgilkar/c7fBk/

Answer

This problem had been fixed by my friends help and many thanks to @teemu for what ever you did. The resolved code is given below:

   (function () {

        function ChangeState(event) {

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

            //style the div
            myDiv.className = 'dynamicDiv';
            myDiv.style.color = 'rgb(255,255,0)';
            myDiv.style.background = 'rgb(0,102,153)';
            myDiv.style.padding = '10px';

            document.body.appendChild(myDiv);

            if (event.target.id == 'text') {
                myDiv.appendChild(document.createTextNode('Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.'));
            }

            else if (event.target.id == 'smallimage') {
                var smallImage = document.createElement('img');
                smallImage.src = 'Images/smallimage.jpg';

                myDiv.appendChild(smallImage);
            }
            else if (event.target.id == 'largeimage') {
                var largeImage = document.createElement('img');
                largeImage.src = 'Images/largeimage.jpg';

                myDiv.appendChild(largeImage);
            }
        }
        document.getElementById('text').addEventListener('click', ChangeState, false);
        document.getElementById('smallimage').addEventListener('click', ChangeState, false);
        document.getElementById('largeimage').addEventListener('click', ChangeState, false);

    }
   ());

I hope this will be helpful for some one!