I need to create an Image element in an html form with all its attribute using javascript how could i do it?

Question

i have a form in which I want to display a loader image only if the file upload field has any path in it, for that i thought of creating the image element in java script along with attributes: src, id and alt..

i am not aware of how to create elements using javascript. please help me.

Answer 1

This page has a good tutorial on dynamically creating DOM elements using javascript.

The standard way to do it is with the document.createElement function.

Answer 2

Using Jquery makes this nice and easy:

---

Javascript:

 $('#MyElementID').html('<img alt="" src="Images/myimage.jpg" />');

HTML:

<div id="MyElementID"></div>

Renders as:

<div id="MyElementID"><img alt="" src="Images/myimage.jpg" /></div>

Answer 3

Small example which adds html code to a placeholder.

<script>
function example()
{
    placeholder.innerHTML  = "<img src='imagehere'/>";
}
</script>
<input type="button" value="Click" onclick="example();"/>
<div id="placeholder"/>