我如何将这个新创建的 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>
答案 0 :(得分:0)
如果您想将新创建的 <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
的子容器。