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

我需要以编程方式更改 div 父级。例如


<body>

  <div id="div_a">

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

  </div>


  <div id="div_b">

  </div>

</body>

我想知道是否可以将 id="child" 父级的 div 更改为 id="div_b" 的 div ?


我有搜索,但还没有接近。但如果有类似的问题,请告诉我。


谢谢


largeQ
浏览 118回答 4
4回答

摇曳的蔷薇

您可以简单地使用appendChild节点并将其作为参数传递。一个节点不能同时位于两个位置,因此它将把它移动到正确的位置。let child = document.querySelector("#child");let parent = document.querySelector("#div_b");parent.appendChild(child);&nbsp; <div id="div_a">&nbsp; &nbsp; <div id="child"></div>&nbsp; </div>&nbsp; <div id="div_b">&nbsp; </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')。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5