我需要以编程方式更改 div 父级。例如<body> <div id="div_a"> <div id="child"></div> </div> <div id="div_b"> </div></body>我想知道是否可以将 id="child" 父级的 div 更改为 id="div_b" 的 div ？我有搜索，但还没有接近。但如果有类似的问题，请告诉我。谢谢
4 回答
摇曳的蔷薇
TA贡献1793条经验 获得超6个赞
您可以简单地使用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>
扬帆大鱼
TA贡献1799条经验 获得超9个赞
在纯 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>
莫回无
TA贡献1865条经验 获得超7个赞
您需要将该元素添加到新的父元素中，然后将其从旧元素中删除。如果你会使用 JQuery，你可以轻松地做到这一点
jQuery("#child").detach().appendTo('#div_b')
使用 JavaScript
var tmp = document.getElementById('child');
document.getElementById('div_b').appendChild(tmp.cloneNode(true));
tmp.remove();
哈士奇WWW
TA贡献1799条经验 获得超6个赞
根据您的应用程序，您可能需要使用 querySelector 或 querySelectorAll 来获取 id="child" 的 div。然后使用 [insert element var].classlist() 可以 .remove('child') 然后 .add('div_b')。
- 4 回答
- 0 关注
- 117 浏览
添加回答
举报
0/150
提交
取消