Question

I’m trying to dynamically insert images and texts using javascript, html and css.

To be more specific, what I’m trying to achieve is to be able to insert x number of images and text. The image will be on the left and the text will be on the right of the image.

Is there any library I can refer to or how should I start?

Answer 1

You may want to start by creating the html that you want, first.

So, have one image, then three then five, so you have three files.

Then, you will be looking at doing this with javascript, but you can first make certain that your css is correct, and what you are looking for.

That way, when you create it from javascript you can compare what you want with what you generated.

As mentioned, jQuery is an excellent library, but, for what you want to do it may be a bit much, unless there is other requirements you have besides just creating the page.

How will you get the data, for example, to the page, so it knows what to generate?

If you are making an ajax call, that will be another requirement.

Do you expect anything to happen when they mouseover an image, or click on an image, that will be unique for each image (such as it will be a thumbnail, mouseover it gets a little bigger)? That would be another requirement.

If all you want to do is create the page, then just do it in plain javascript, as it will be simple, and to get good with jQuery you should still learn javascript.

UPDATE: I noticed an excellent comment, by generate I was assuming you would just create an <img> tag, if you are dynamically generating the image then you won’t be able to do that in html, you will end up using the <canvas> tag, then the issue is which versions of IE must this work on.