我正试图将通过脚本插入的<div>移动到另一个嵌套的<div>元素中(请参阅示例照片(。我尝试过使用一些Javascript和Jquery(例如document.getElementById('destination').appendChild(document.getElementById('source'))(，但一直无法做到
我需要移动它，因为我需要相对于嵌套的<div>定位<div>，这样当嵌套的<div>被调整大小时，另一个<div>将随之移动。
任何想法都将不胜感激！我没有太多HTML/CSS/Javascript/Jquery的经验，但我当然愿意尝试一下让它发挥作用！
下面是一些代码的示例。我需要把<div style id="sp-root-container">移到<div id="sidebar_div">下面。我还假设子元素在移动时会跟随？请注意，我意识到标签搞砸了。我不能直接复制粘贴它。不过我想它会让人明白的！
<body class ="class goes here" >
<div class="container"> </div>
<div class="container-inner"></div>
<div class="column column--sm-3 custom-blocks__right"></div>
<div class="knowledge-base"> </div>
<div class="row clearfix"></div>
<div class="column column--md-3"> </div>
<div id="sidebar_div" class="hp-sidebar"> </div>
<div style id="sp-root-container" class="desktop-version"></div>
</body>
选项1
此脚本等待id为preview-bar-container的元素在加载此元素时出现。。。获取元素preview-bar-container并将其移动到id为preview-bar-container的元素
我可能在从你的照片中复制物品名称时犯了错误。。。所以请检查它们
var checkExist = setInterval(function () {
var el = document.getElementById('preview-bar-container');
if (el) {
var dest = document.getElementById('sidebar_div');
dest.appendChild(el);
clearInterval(checkExist);
}
}, 100);
选项2
此脚本等待id为preview-bar-container的元素在加载此元素时出现。。。获取元素preview-bar-container，将其移动到id为preview-bar-container的元素的父元素
var checkExist = setInterval(function () {
var el = document.getElementById('preview-bar-container');
if (el) {
var dest = document.getElementById('sidebar_div').parentElement;
dest.appendChild(el);
clearInterval(checkExist);
}
}, 100);
选项1模拟：
// After 3s add content
setTimeout(() => {
document.body.innerHTML += '<div id="preview-bar-container">Lorem ipsum dolor sit amet</div>';
}, 3000);
// Check every 100ms and when the target appears move it
var checkExist = setInterval(function () {
var el = document.getElementById('preview-bar-container');
if (el) {
var dest = document.getElementById('sidebar_div');
dest.appendChild(el);
clearInterval(checkExist);
}
}, 100);<div id="sidebar_div">
sidebar_div
</div>选项2模拟：
// After 3s add content
setTimeout(() => {
document.body.innerHTML += '<div id="preview-bar-container">Lorem ipsum dolor sit amet</div>';
}, 3000);
// Check every 100ms and when the target appears move it
var checkExist = setInterval(function () {
var el = document.getElementById('preview-bar-container');
if (el) {
var dest = document.getElementById('sidebar_div').parentElement;
dest.appendChild(el);
clearInterval(checkExist);
}
}, 100);<div>
<div>
<div id="sidebar_div">
sidebar_div
</div>
</div>
</div>const divNeedToMove = document.getElementById("preview-bar-container");
const targetWhereToMove = document.getElementById("sidebar_div");
// --- removing
divNeedToMove.remove();
// --- adding to target
targetWhereToMove.append(divNeedToMove);