Move an element to another parent after changing its ID

Question

I have HTML like this:

<span class="file-wrapper" id="fileSpan">     <input type="file" name="photo[]" id="photo" />     <span class="button">Click to choose photo</span> </span> 

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.

Answer 1

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/