How do you make a picture appear onClick using javascript

Question

here is the html

<div id="first_caption">
    <p style="float: left; clear: left">
        <a id="light_on" href="#" onclick="myClick()">
            <img id="light_img" src="http://www.ottawaskeptics.org/images/stories/lightbulb.jpg" height="50" width="50">
        </a>
        How can you stay healthy and do more of the things you love? Click the light  bulb to find out how.
    </p><br><br><br>
</div>
<div id="heading1">
</div>

here is the javaScript

<script>
    function myClick(){
        text = "<b><i><br><br>You can save a ton of money by drinking tap or filtered water,  instead of wasting hundreds of dollars on bottled water. Did you know the average person spends $100+ per person every year! The good thing is its not your fault; many people are inticed by clever advertising, and thinking it has neutrisional values that other water does not contain. The truth is Big companies like Nestle and Coca'cola are simply profiting off making you think youre making a healthy choice. Bottled water is only tested once a weak for contamination and germs, and is no better than your average tap water. Honestly, if you really wanted to make a healthier decision try filtered water. You could argue that you still have a water bill dont you? well, according to STATISTIC BRAIN,'the total cost of a monthly water bill if tap cost as much as the cheapest watter bottle would be $9000!'  </i></b>";
        document.getElementById('heading1').innerHTML = document.getElementById('heading1').innerHTML + text;
        document.getElementById("heading1").style.textAlign="left";
        document.getElementById("heading1").style.marginLeft="20px";
    }
</script>

Basically after i click the light bulb some text appears below the picture. I would like to know using the same method how can i make a picture appear instead.

Answer 1

Change the "text" content, and do not append it, just overwrite:

 <script>
    function myClick(){
    text = "<img src='http://www.online-image-editor.com/styles/2013/images/example_image.png'";
    document.getElementById('heading1').innerHTML = text;
    }

 </script>

Answer 2

You can create an img element in the html with style="display: none;"and then get this element and set the new style with display: block;inside myClick() function

Answer 3

You could add the image to your HTML code and set display property to none and then change it with javascript.

<div id="first_caption">
    <p style="float: left; clear: left">
        <a id="light_on" href="#" onclick="myClick()">
            <img id="light_img" src="http://www.ottawaskeptics.org/images/stories/lightbulb.jpg" height="50" width="50" />

        </a>
        How can you stay healthy and do more of the things you love? Click the light  bulb to find out how.
    </p><br><br><br>
</div>
<div id="heading1">
    <img id="myNewImage" src="" /> <!-- your new image -->
</div>

#myNewImage { display:none; }

function myClick() {
    document.getElementById("myNewImage").style.display = "block";
}