如何将通过 ID 找到的 HTML 元素添加到正文中？答案

【问题标题】：How to add an HTML element found by ID to the body?如何将通过 ID 找到的 HTML 元素添加到正文中？
【发布时间】：2023-01-26 23:12:23
【问题描述】：

我想将一个通过 ID 找到的 DOM 元素添加到 body 标记中，并删除所有新存在的 body 节点。

我的解决方案不起作用：

var ele = document.getElementById("email");
document.body.innerHTML = ele;

【问题讨论】：

如果您可以使用 getElementByID 找到它，它已经是身体的一部分

标签： javascript html

【解决方案1】：

有几个选项。

选项 1：清除 <body> 的内容并将您的元素附加为子元素。

var el = document.getElementById("one");
document.body.innerHTML = ''; // Clears the body inner HTML
document.body.appendChild(el) // Appends your element as a child

<div id="one">
 HELLO
</div>
GOOD BYE CONTENT

选项 2：用您的元素替换 <body> 的子元素。

var el = document.getElementById("one");
document.body.replaceChildren(el); // Replace the body content by your element

<div id="one">
 HELLO
</div>
GOOD BYE CONTENT

【讨论】：

【解决方案2】：

这个：

document.body.innerHTML = ele;

会翻译ele作为一个字符串并将该字符串写入文档正文。该字符串将类似于 "[object HTMLDivElement]"（可能因浏览器而异）。

并删除所有现有的身体节点

听起来你在找document.body.replaceChildren()？例如：
var ele = document.getElementById("email");
document.body.replaceChildren(ele);
<div>test 1</div>
<div id="email">test 2</div>
<div>test 3</div>

【讨论】：

【解决方案3】：

使用 append 或 replaceChildren 你可以做到这一点。

const tag = document.querySelector('#email');
const w = document.createElement('div');
w.append(tag)
document.querySelector('body').innerHTML = '';
document.querySelector('body').append(w);

<html>
  <head>Head</head>
  <body>
    <h1>body</h1>
    <div id="email"> EMAIL </div>
  </body>
</html>

const tag = document.querySelector('#email');
const w = document.createElement('div');
document.querySelector('body').innerHTML = '';
document.querySelector('body').replaceChildren(tag);

<html>
  <head>Head</head>
  <body>
    <h1>body</h1>
    <div id="email"> EMAIL </div>
  </body>
</html>

【讨论】：

【解决方案4】：

我会用其他方式解决这个问题，使用querySelectorAll找到所有<div>（示例），其中id:not()email并调用remove()。

[ ...document.querySelectorAll('div:not([id="email"])') ].forEach(e =&gt; e.remove());

<div id='foo'>Foo</div>
<div id='bar'>Bar</div>
<div id='email'>Email</div>

【讨论】：