moving html elements from one node to another

Question

I wanna move an html elements from one node to another but I didn't know how, when I thought about it at first It seems easy but in practice it's a little bit hard I'm still thinking it's silly though.

here is an example:

    <div 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 class="con">

    </div>
<button> click ME </button>

I wanna move what is inside the .container div to the .co div I have searched a lot on google but I didn't find anything useful, I have searched even here on stackoverflow but I did find a solution.

any help please and thank you in advance

questions I have saw and didn't solve the problem:

Moving HTML element from one page to another

"Cut and Paste" - moving nodes in the DOM with Javascript

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

When shall the moving take effect ? After a `button` click maybe ? — ThS, Jul 24 '19 at 22:05
I think this answer should be what you looking for [answer](https://stackoverflow.com/questions/20910147/how-to-move-all-html-element-children-to-another-parent-using-javascript) — Rokas Rudgalvis, Jul 24 '19 at 22:16

score 1 · Accepted Answer · answered Jul 24 '19 at 22:17

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);

score 0 · Answer 2 · answered Jul 24 '19 at 22:20

You need to find a way to remove each element from the .container div and then add each of them to the .con div. I would do it like this:

// get all children of container
const containerChildren = document.querySelector('.container').children;
// turn them into an array and loop through them
Array.from(containerChildren)).forEach((el) => {
    // remove element
    el.remove();
    // select .con and add it to that div
    document.querySelector('.con').append(el);
});

You can turn that into a function and then add it to the button like so:

function handleClick() {
    const containerChildren = document.querySelector('.container').children;
    Array.from(containerChildren)).forEach((el) => {
        el.remove();
        document.querySelector('.con').append(el);
    });
}
document.querySelector('button').onclick = handleClick;

score 0 · Answer 3 · answered Jul 24 '19 at 22:25

A simple approach is : while there is at least an element in div.container move it to div.con. The an element is the JavaScript's HTMLElement objects firstChild attribute, so as long as there is a first child move it to div.con.

Here's a demo, it contains a wealth of helpful comments :

/** selecting the main "divs" and the "button" **/
let container = document.querySelector('.container'),
  con = document.querySelector('.con'),
  btn = document.getElementById('move');

/** click handler for the "button" **/
move.addEventListener('click', e => {
  while (el = container.firstChild) con.appendChild(el); /** move the child to the other div and keep their appearnance (placement) as they were in the first "div" **/
});

/** some styling to distinguish between the two main eements (divs) **/

.container,
.con {
  padding: 15px;
  border: 2px solid transparent;
  margin: 15px 0;
}

.container {
  border-color: blue;
}

.con {
  border-color: red;
}

<!-- the button is selected in "JavaScript" based on its ID (move) -->
<!-- some styling is used to distinguish between the elements : the ".contaier" has a blue border while the ".con" has a red one. Notice which element has children in it after clicking the "button" -->

<button id="move">Move elements</button>

<div 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 class="con"></div>

score -4 · Answer 4 · answered Jul 24 '19 at 22:08

you can use every class by useing the link of class in your html codes by this syntax :

<head> <link href="class.css" rel="stylesheet" type="text/css" /> </head>
however if you have not the class file (file.css) , first you have to write your css in the file : class.css and then use that code every where you want !

moving html elements from one node to another

4 Answers4