How to append Img to Img in html or javascript

Question

Hello I am trying to make status bar, which I add some image after previous image. Let me explain it clear.

I have two image(gif). Guess white 10x10px and black 10x10px.

I use this tag <Img src='./black.gif> on my homepage. and I want to put <Img src='./white.gif> after <Img src='./black.gif> .

finally it looks something like this

■□□■■□■□■

Is it possible to do using HTML? or any good idea?

---------add

thanks. Actually I can have more images, and it isn't fixed. For example, I want to append a image corresponding with the value like 1-3(green) 4-7(yellow) 8-10(red). And the data from highcharts dynamic update.

Answer 1

Solution 1 (preferred):

Why can't you just use the background-repeat property and use Photoshop to create a single image with the black and the white squares? IF you can't do this, see below for another solution.

Solution 2:

You can wrap the images in a div and give them a float: left :

HTML:

<div>
    <div class="image_cont">
        <img src="white.jpg" />
    </div>
    <div class="image_cont">
        <img src="white.jpg" />
    </div>
</div>

CSS:

.image_cont{
    float: left; /* OR display: inline-block  OR  width: xx px */
}

Working Example (JSFiddle)

Answer 2

I found it with jQuery. The solution is to use "append" and wrap img with div container.

and

$('#image_status').append('');

Answer 3

wrap the images with a div container and assign an id to it ie (id) then use this css property:

div#id img{
display: inline-block;
}

jsfiddle