使用javascript更改<div>元素的父元素是否可行？

Question

使用javascript更改<div>元素的父元素是否可行？

3

我需要在程序中动态更改一个 div 的父元素。例如：

<body>
  <div id="div_a">
    <div id="child"></div>
  </div>

  <div id="div_b">
  </div>
</body>

我想知道是否可能将id为"child"的div更改为其父级div中id为"div_b"的div？

我已经搜索过了，但找不到类似的问题。如果有类似的问题，请告诉我。

谢谢。

- Lyn

请更具体一些，您想将<div id="child转换为<div id="div_b并将其移动到<div id="div_a之外吗？ - Mister Jojo

4个回答

2

在纯JS中，您可以使用document.querySelector（或document.getElementById）和Node.appendChild将#child div附加到#div_b div。由于节点不能存在于多个位置，因此这也自动从#div_a中删除它：

document.querySelector('#div_b').appendChild(document.querySelector('#child'));
// or document.getElementById('div_b').appendChild(document.getElementById('child'));

<body>
  <div id="div_a">
  Div A!
    <div id="child">I am a child of Div A</div>
  </div>
  <hr/>
  <div id="div_b">
  Div B!
  </div>
</body>

- Nick

0

您需要将该元素添加到新的父级，然后从旧的父级中删除它。如果您可以使用JQuery，那么可以轻松地完成此操作：

jQuery("#child").detach().appendTo('#div_b')

使用JavaScript

var tmp = document.getElementById('child');
document.getElementById('div_b').appendChild(tmp.cloneNode(true));
tmp.remove();

- Kamyar Mirzavaziri

-1

根据你的应用程序，你可能想要使用querySelector或querySelectorAll来获取id为"child"的div。然后使用[插入元素变量].classlist()，你可以.remove('child')，然后添加.div_b

- S Henry

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zfrisch · Accepted Answer

您可以简单地使用 appendChild 并将节点作为参数传递。一个节点不能同时存在于两个位置，因此它会将其移动到正确的位置。

let child = document.querySelector("#child");
let parent = document.querySelector("#div_b");

parent.appendChild(child);

  <div id="div_a">
    <div id="child"></div>
  </div>

  <div id="div_b">
  </div>