更改其 ID 后将元素移动到另一个父级答案

【问题标题】：Move an element to another parent after changing its ID更改其 ID 后将元素移动到另一个父级
【发布时间】：2011-09-26 12:59:59
【问题描述】：

我有这样的 HTML：

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

我想从那里提取输入字段，更改其 ID 并将其放入另一个 div。

我该怎么做？如果需要 jQuery，那没关系，但如果没有，那就太好了。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

在 jQuery 中当然很简单：

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

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

工作演示：http://jsfiddle.net/AndyE/a93Az/

如果你想用普通的 JS 来做，它仍然相当简单：

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

工作演示：http://jsfiddle.net/AndyE/a93Az/1/

【讨论】：

@Royi：轻松移植到旧版本，只需将 prop() 更改为 attr()。
我们不应该尽可能选择最新版本的 jQuery 吗？
@Bracketworks：我会这么说。 IIRC，prop() 应该比attr() 更高效一点，因为在兼容性方面要做的工作更少。
值得说明的是，当您将appendChild（或append 或appendTo）与现有DOM 元素一起使用时，该元素将移动到新位置，而不是复制到那里。
@mblase75: 也许吧，但是在阅读或测试代码时这不是很清楚吗？无论如何，工作演示应该可以消除任何混乱:-)