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: 
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?
in pure javascript you can do something like:

```
function changeToImage(el) {
    var img = document.createElement('img');
    img.setAttribute('src', 'http://www.google.com/images/nav_logo29.png');
    img.setAttribute('ID', el.getAttribute('id'));
    var parent = el.parentNode;
    parent.appendChild(img);
    parent.removeChild(el);
}

```

then from your html you would do 

```
<input type="checkbox" onclick="changeToImage(this)" />

```

note that this may not be cross-browser proof.... you can also use jquery to simplify things