How to Move All HTML Element Children to Another Parent Using JavaScript

How to move all HTML element children to another parent using JavaScript?

Basically, you want to loop through each direct descendent of the old-parent node, and move it to the new parent. Any children of a direct descendent will get moved with it.

var newParent = document.getElementById('new-parent');
var oldParent = document.getElementById('old-parent');

function move() {
  while (oldParent.childNodes.length > 0) {
    newParent.appendChild(oldParent.childNodes[0]);
  }
}

#old-parent {
  background-color: red;
}

#new-parent {
  background-color: green;
}

<div id="old-parent">
  <span>Foo</span>
  <b>Bar</b> Hello World
</div>
<div id="new-parent"></div>
<br>
<button onclick="move()" id="button">Move childs</button>

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

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>

How do I move children elements to a new parent element in jQuery?

This is kind of what you are trying to do I think.

$('ul.sub_menu li').each(function (i) {  const index = Math.trunc(i / 4);  $(this).detach().appendTo($('div.wrap ul').get(index));});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul class="sub_menu">    <li>Menu 1</li>    <li>Menu 2</li>    <li>Menu 3</li>    <li>Menu 4</li>    <li>Menu 5</li>    <li>Menu 6</li>    <li>Menu 7</li>    <li>Menu 8</li></ul>
<div class="container_row">    <div class="row">        <div class="col1 col_3">            <div class="wrap">                <ul></ul>            </div>        </div>        <div class="col1 col_3">            <div class="wrap">                <ul></ul>            </div>        </div>    </div></div>

moving html elements from one node to another

here is the solution :
HTML

<div id="parent1" class="container">
  <h1>text</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="parent2" class="con">

</div>

JS

let insideContainer = document.getElementById('parent1');
let con = document.getElementById('parent2');

con.append(...insideContainer.children);

Move an element to another parent after changing its ID

It's certainly easy in jQuery:

// jQuery 1.6+
$("#photo").prop("id", "newId").appendTo("#someOtherDiv");

// jQuery (all versions)
$("#photo").attr("id", "newId").appendTo("#someOtherDiv");

Working demo: http://jsfiddle.net/AndyE/a93Az/

---

If you want to do it in plain ol' JS, it's still fairly simple:

var photo = document.getElementById("photo");
photo.id  = "newId";
document.getElementById("someOtherDiv").appendChild(photo); 

Working demo: http://jsfiddle.net/AndyE/a93Az/1/

Move childNodes to other parent affect only half of them

It seems that child node is being removed from parent.childNodes each time

child => newParent.appendChild(child)

is being executed. So you are having a problem since your collection is being modified each time the line above is executed.

Array.from(parent.childNodes).forEach(child => newParent.appendChild(child))

will do the trick, since you are first creating a new array of 10 elements, and traversing through all of the 10 items

is it possible to move the child element on the parent element by CSS only?

I'm afraid that simply isn't possible in CSS. You'll have to recreate the html elements in JS the way you want them to. If you want to do that, you can use JS methods such as document.createElement() parent.removeChild('childName') and element.appendChild(). Maybe the following steps will help

• You can copy the child element
• Remove it from the parent or container element
• Take the element you copied from the parent element and append it to the parent of the parent element (the <td> in this case)

How to move an element into the next parent element in the DOM?

To achieve this you could loop through all p elements as there are multiple, and then use appendTo() to add them to their related .tmb. Try this:

$('p').each((i, p) => $(p).appendTo($(p).next('.tmb')));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>The first text that needs to be moved</p>
<div class="tmb">
  <span class="price">500</span>
</div>
<p>Second text that needs to be moved</p>
<div class="tmb">
  <span class="price">500</span>
</div>

---

Related Topics