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: 
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.
You can try to write like this one.
It worked for me.
Replace the innerHTML with HTML

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

```