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

4回答

摇曳的蔷薇

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

扬帆大鱼

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

莫回无

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

哈士奇WWW

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