How can i put image into the <div id="item1"></div>?

I am facing this problem.. May i know, how can i put image into this element tag,

<div id="item1"></div>

The purpose of this code below, is when the user click "+" the image will appear. And When the user click "play" button, the image that appeared, is supposed to put into the tag as mentioned above.

Unfortunately, i am not able to make the image that just appear, to be put into the tag..

I know there is hardcoding method, but sorry, i am not looking for this method..

    <!DOCTYPE html>
    <script src=""></script>
    <script src=""></script>   

      .myClass {
            width: 40px; height: 40px; float:left;
           padding: 1px; margin:3px; position:absolute; 
            left:50px; top:60px; background:blue; color:white;

<body bgcolor="green";>
    <div id="item1" class="myClass">F1</div>
    <div id="item2" class="myClass">F2</div>
    <div id="item3" class="myClass">F3</div>

        var predator;

        var Predatorlist = [];            

        function addvalue()

        function removevalue()

        //************** End of Array *********************** 
        function Add() {
            var id = Math.floor(Math.random()*101+1);
            x = Math.random() * 550;
            y = Math.random() * 250;
            if (document.getElementById('amount').value < 50){
                svg = document.getElementById("main");

                var id = 'predator';
                uniqueid =  "frog" + document.getElementById('amount').value;

                //namespaces for SVG

                // create a image element
               image = document.createElementNS(svgNS, 'image');

                // set id and other attributes
                image.setAttributeNS(null, "id", uniqueid);
                image.setAttributeNS(xlinkNS, "href","jef-frog.gif");
                image.setAttributeNS(null, "x", x);
                image.setAttributeNS(null, "y", y);
                image.setAttributeNS(null, "width", "50");
                image.setAttributeNS(null, "height", "50");

                // append to svg
            } else {
                alert("we got 50");

       function Remove() {
            if(document.getElementById('amount').value > 0)
                svg = document.getElementById("main");

        function numinput(e){
            // get the input value if enter
            key=e.keyCode || e.which;
            if (key==13){
                total = document.getElementById("amount").value;
                dummy = total;

                // clear svg with image to avoid clearing the canvas
                svg = document.getElementById("main");
                element = svg.getElementsByTagName("image");
                    element = svg.getElementsByTagName("image");

                // use the input to create the number of frog.
                while (dummy>0)
                document.getElementById("amount").value = total;

        function randomRange(min,max) {
            return Math.random() * (max-min) + min;

        /* Generate some random starting position */
        var startItem1X = randomRange(50,100);
        var startItem1Y = randomRange(50,100);
        var startItem2X = randomRange(50,100);
        var startItem2Y = randomRange(50,100);
        var startItem3X = randomRange(50,100);
        var startItem3Y = randomRange(50,100);
        var startmyClassX = randomRange(50,100);
        var startmyClassY = randomRange(50,100);

        var item1 = $("#item1"),cycle1;
        var item2 = $("#item2"),cycle1;
        var item3 = $("#item3"),cycle1;

        function runItem1() {                               
            /* Set a the starting position to be random by editing the css */
            $("#item1").css("left", startItem1X+"px");
            $("#item1").css("top", startItem1Y+"px");

          /* Cycle1 and Cycle2 variables allow infinite loop */ 
            (cycle1 = function() {
             var m = randomRange(50,100);
             var n = randomRange(75,150);
             item1.animate({left:'+='+m, top:'+='+m}, 2000)
             item1.animate({left:'-='+m, top:'+='+m}, 2000)


        function runItem2() {
            $("#item2").css("left", startItem2X+"px");
            $("#item2").css("top", startItem2Y+"px");

            (cycle2 = function() {
             var m = randomRange(50,100);
             var n = randomRange(75,150);
             item2.animate({top:'+='+m, left:'+='+n},2000);
             item2.animate({left:'+='+n, top:'-='+n},2000);

    <SVG xmlns=""

        xmlns:xlink="" id="main" style="border:inset 1px #000000;width:600;height:300"><param name='wmode' value='transparent'/></SVG>

    <img src="jef-frog.gif" alt="" width="100" height="100"/><BR/>

    <INPUT type="button" value="+" onClick="Add(); addvalue();"> 
    <INPUT type="text" id="amount" value=0  maxlength="3" size="1"  onkeypress="numinput(evt)">
    <INPUT type="button" value="-" onClick="Remove(); removevalue();">        
    <INPUT type="button" value="Play" onClick="runItem1(); runItem2();">  


Many thanks to whoever out there, taking time to read and trying to help.. Thanks again..


would do it.

$('#your-play-button').click(function(e) {

  $('#item1').html('<img src="mygif.gif" />');


edit after looking into your code you could replace:


by $("#amount") etc. and really work with jQuery. Because now you don't use the advantage of jQuery, but you are just writing plain javascript...

well you can add a img tag using the innerhtml property or creating the element and appending it to div. then based on your logic you can set the tag's src of the image to the desired one.

Need Your Help

Google maps marker in one country

javascript google-maps delimiter

Does anyone know how to just enable markers for a specific country in google maps, using the javascript api.

Python script embedded in HTML

python html

I've seen many questions that ask similar things, but I felt none of them asked it in this particular way. I have a Python script that asks for an input number and attempts to calculate another nu...