dynamically change html element

Question

I have some checkboxes, once I check one of these the ID of the checkbox is sent to a function. I want this function to change the checkbox to a <img>element with the same ID.

I have tried

document.getElementById(ID).innerHTML = '<img src="image.png" id="' + ID + '"/>';

But this doesn't work, is it possible to change a element or would I need to create a new one using the same ID?

Thanks

Answer 1

I would advise that rather than replace one element with another you make one visible and one invisible eg...

document.getElementById(ID).style.display='none';

and

document.getElementById(ID).style.display='block';

And I would think of a way round the same ID constraint. Why do you need them to have exactly the same ID?

Answer 2

You'll need to create a new element and remove the old one. In case you need it, here's a quick article on adding and removing elements using javascript: http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

By way of explaining why you can't do what you were trying to do, your elements are represented in the DOM as different "types" (strictly speaking, this is not true, but it's a useful representation), and you can't just change the "type" of an object by changing its underlying markup.