gpt4 book ai didi

javascript - 如何将子 Div 移动到另一个嵌套的非父 Div 中

转载 作者:行者123 更新时间:2023-12-03 07:09:53 28 4
gpt4 key购买 nike

我正在尝试移动 <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/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com