Move button when clicked

Question

How do I move the button from the div with id of two to the div with id of one when I click the button?

<div id="one">

</div>

<div id="two">
  <button onclick="moveMe"></button>
</div>

function moveMe() {
 // ??
}

Does this answer your question? ["Cut and Paste" - moving nodes in the DOM with Javascript](https://stackoverflow.com/questions/324303/cut-and-paste-moving-nodes-in-the-dom-with-javascript) — jeffjenx, Feb 10 '22 at 13:56

Dipak · Accepted Answer · 2022-02-10T14:15:53.510

We can do this using removeChild and appendChild js features. Provided an example below with working code.

const one =  document.getElementById("one");
const two =  document.getElementById("two");


const allButtons = document.getElementsByTagName("button");

for(let i = 0; i < allButtons.length; i++) {
  const btn = allButtons[i];
  btn.addEventListener("click", function(e) {
    const el = e.currentTarget;
    const newParent =  el.parentNode.id == "one" ? two : one;
    el.parentNode.removeChild(el);
    newParent.appendChild(el)
  });
}

.section {
  height: 100px;
  width: 150px;
  padding: 4px;
  margin: 5px;
  float: left;
}

#one {
  background: #CCC;
}

#two {
  background: #eee;
}

button {
  margin: 2px;
  padding: 4px;
}

<h3>Toggle button between container on click</h3>
<div>
  <div class="section" id="one"></div>
  <div class="section" id="two"> <button>Move me 1</button> <button>Move me 2</button></div>
</div>

score 1 · Answer 2 · answered Feb 10 '22 at 14:13

function moveMe() {
  const divTwo = document.getElementById("two")
  const divOne = document.getElementById("one")
  
  const newButton = document.createElement("button")
  newButton.innerText = "Click me"
  
  divOne.appendChild(newButton)
  divTwo.children[1].remove()
}

<div id="one">
<p>
div one
</p>
</div>

<div id="two">
<p>
div two
</p>
  <button onclick="moveMe()">Click me</button>
</div>

score 0 · Answer 3 · answered Feb 10 '22 at 14:01

You can try this:

// select the elements
const button = document.querySelector('button');
const firstDiv = document.getElementById('one');

// add eventListener
button.addEventListener('click', moveButton);

// move the button
function moveButton() {
  firstDiv.append(button);
}

score 0 · Answer 4 · answered Feb 10 '22 at 14:02

<div id="one">

</div>

<div id="two">
  <button id="btn" onclick="moveMe">MoveMe</button>
</div>

 function moveMe() {
        var divOne = document.querySelector("#one");
        var btn = document.querySelector("#btn");
        divOne.appendChild(btn);
 }

score 0 · Answer 5 · answered Feb 10 '22 at 14:12

You can use code below to move the element.

There's some changes that I made on your code,

you can use version 1 or version 2

the changes on first version is i add "id" attribute on the element so we don't resort to use the tag only as selector, of course you can also use #two>button to make it more precise
the changes on second version is i add a parameter to your function this time it will handle the current element using "this" keyword when calling the function

function moveMe(){
    // one.appendChild(document.querySelector("button"));
    one.appendChild(move);
}

function moveMeV2(element){
    one.appendChild(element);
}

<div id="one">
  <span>one</span>
</div>

<div id="two">
  <span>two</span>
  <button id="move" onclick="moveMe()">Move Me</button>
  <button onclick="moveMeV2(this)">Move Me V2</button>
</div>

Move button when clicked

5 Answers5