将 div 移动到另一个 div

Question

我如何将这个新创建的 DIV 'led-box' 移动到文档中更高的另一个父 div？它的孩子“led-green”需要跟着它移动。

有什么想法吗？谢谢。

const org = document.querySelector(".directory_availability")
const newItem =  document.createElement('div');   
newItem.className = "led-box";  
newItem.innerHTML = '<div class=led-green></div>';    
org.parentNode.replaceChild(newItem, org);   

<div class="directory-item">
    <div class="avatar">
    </div>
    <h3 class="display-name">
    </h3>
    <div class="DetailsWrapper">
      <div class="led-box">
        <div class="led-green"></div>
      </div>
    </div>
  </div>

Answer 1

如果您想将新创建的 <div> 连同它的嵌套内容一起添加到 DOM 结构中更高的父容器中。您可以利用 Node.appendChild() 将节点添加到指定父元素的子元素列表的末尾。如果您想在父容器 <div class="led-box"> 的第一个子项之前插入 .directory-item 元素，您可以改用 ParentNode.prepend()。

const org = document.querySelector(".directory-item")
const newItem =  document.createElement('div');
newItem.setAttribute("class", "led-box");
newItem.innerHTML = "newly added parent div";

const newItemChild = document.createElement("div");
newItemChild.setAttribute("class", "led-green");
newItemChild.innerHTML = "newly added child div";

// append the 'led-green' div into 'led-box' container
newItem.appendChild(newItemChild);

// append the newly created div into 'directory_availability'
org.appendChild(newItem);

<div class="directory-item">
    <div class="avatar"></div>
    <h3 class="display-name">Some Name</h3>
    <div class="DetailsWrapper"></div>
</div>

这是更新后的 DOM 结构，<div class="led-box"> 容器现在是父容器 .directory-item 的子容器。