Conditional Load

HTML

<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" />

JavaScript

(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);
        }
       ());