How to Move a Child Div Inside Another Nested Non-Parent Div
Question
I am trying to move a <div> that was inserted via a script inside another nested <div> element ( see the example photo) . I have tried to use some Javascript and Jquery (eg document.getElementById('destination').appendChild(document.getElementById('source')) ), but I have been unable to do it.
I need to move it because I need to position the <div> in relation to the nested <div> so that when the nested <div> gets resized, the other <div> will move along with it.
Any ideas would be appreciated! I don't have a whole lot of HTML/CSS/Javascript/Jquery experience, but I'm certainly willing to try things to get it to work!
Here's an example of some code. I need to move the <div style id="sp-root-container"> under the <div id="sidebar_div"> . I am also assuming the child elements will follow when they get moved? Please note that I realize the tags are messed up. I couldn't straight up copy and paste it. I think it'll get the point across though!
<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>
2 answers
solution1
1 ACCPTED 2020-11-16 06:06:11
Option 1
This script waits for an element with id preview-bar-container to appear when this element is loaded ... Takes the element preview-bar-container and moves it to an element with id preview-bar-container
It is posible I have made a mistake in copying the names of the items from your picture ... so please check them
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);
Option 2
This script waits for an element with id preview-bar-container to appear when this element is loaded ... Takes the element preview-bar-container and moves it to parent element of element with 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);
Option 1 Simulation:
// 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>
Option 2 Simulation:
// 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>
solution2
0 2020-11-16 05:52:50
const divNeedToMove = document.getElementById("preview-bar-container");
const targetWhereToMove = document.getElementById("sidebar_div");
// --- removing
divNeedToMove.remove();
// --- adding to target
targetWhereToMove.append(divNeedToMove);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.