我正在尝试移动 <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 和 < strong>将其移动到 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>关于javascript - 如何将子 Div 移动到另一个嵌套的非父 Div 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64852941/