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 (e.g. 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>

Please check this discussion which might help you: https://stackoverflow.com/questions/20910147/how-to-move-all-html-element-children-to-another-parent-using-javascript/20910214 — NGK Chaitanya, Nov 16 '20 at 05:23
Your solution should work. Can you paste your code or just a fragments needed to recreate this? — wjatek, Nov 16 '20 at 05:33
Please post your code as text - [not as an image](https://meta.stackoverflow.com/q/285551). This makes it much easier for us to help you. — Wai Ha Lee, Nov 16 '20 at 06:18
Hey guys! Sure. I would have, but I couldn't copy directly from where I was editing it. I'm about to update the post with some sample code. — Justin Sutherland, Nov 17 '20 at 01:43

54ka · Accepted Answer · 2020-11-16T07:19:15.927

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>

Thank you! I think what was happening was that when the script was run, the element hadn't loaded yet. Worked like a charm! — Justin Sutherland, Nov 17 '20 at 02:02

score 0 · Answer 2 · answered Nov 16 '20 at 05:52

0

const divNeedToMove = document.getElementById("preview-bar-container");
const targetWhereToMove = document.getElementById("sidebar_div");

// --- removing
divNeedToMove.remove();

// --- adding to target
targetWhereToMove.append(divNeedToMove);

answered Nov 16 '20 at 05:52

Mujibur Rehman Ansari

653
1
6
17

How to Move a Child Div Inside Another Nested Non-Parent Div

2 Answers2