Move an element to another parent after changing its ID

Question

I have HTML like this: ``` Click to choose photo ``` I want to extract the input field from there, change its ID and put it in an other div. How can I do that? If jQuery is needed that's okay, but if it can be without that would be great.

Accepted Answer

It's certainly easy in jQuery:

```
// jQuery 1.6+
$("#photo").prop("id", "newId").appendTo("#someOtherDiv");

// jQuery (all versions)
$("#photo").attr("id", "newId").appendTo("#someOtherDiv");
```

Working demo: http://jsfiddle.net/AndyE/a93Az/

If you want to do it in plain ol' JS, it's still fairly simple:

```
var photo = document.getElementById("photo");
photo.id  = "newId";
document.getElementById("someOtherDiv").appendChild(photo); 
```

Working demo: http://jsfiddle.net/AndyE/a93Az/1/

Move an element to another parent after changing its ID

Solution

Problem