是否可以使用 javascript 更改 <div> 父级？

4回答

LEATH

您可以简单地使用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>

精慕HU

您需要将元素添加到新父级，然后将其从旧父级中删除。如果你可以使用 JQuery，你可以很容易地做到这一点jQuery("#child").detach().appendTo('#div_b')使用 JavaScriptvar tmp = document.getElementById('child');document.getElementById('div_b').appendChild(tmp.cloneNode(true));tmp.remove();

慕容森

在纯 JS 中，您可以使用document.querySelector(或document.getElementById)将 divNode.appendChild附加#child到#div_bdiv。由于一个节点不能存在于多个地方，这也会自动将其从以下位置删除#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>

噜噜哒

根据您的应用程序，您可能希望使用 querySelector 或 querySelectorAll 来获取 id="child" 的 div。然后使用 [insert element var].classlist() 你可以 .remove('child') 然后 .add('div_b')。