如何将通过ID查找的HTML元素添加到body标签并清空原有节点？

你的代码无法工作的核心原因是：document.body.innerHTML 接受的是HTML字符串，而非DOM元素对象。直接把DOM节点赋值给它时，JS会自动将元素转为字符串（比如输出[object HTMLInputElement]），自然无法实现插入元素的效果。

以下是两种可行的解决方法：

方法一：先清空body，再添加元素 #

如果希望将目标元素从原位置移动到body中：

var ele = document.getElementById("email");
// 清空body所有现有节点
document.body.innerHTML = '';
// 将元素添加到body末尾
document.body.appendChild(ele);

如果需要保留原元素在原位置，要先克隆元素：

var ele = document.getElementById("email");
// 深克隆元素（true表示包含所有子元素）
var eleClone = ele.cloneNode(true);
document.body.innerHTML = '';
document.body.appendChild(eleClone);

方法二：使用replaceChildren（现代浏览器推荐） #

这是更简洁的写法，一步完成清空body并添加元素的操作：

var ele = document.getElementById("email");
// 移除body所有子节点，同时添加目标元素
document.body.replaceChildren(ele);

同样，如果需要保留原元素，记得先克隆再传入replaceChildren。

内容的提问来源于stack exchange，提问作者vuvu