¿Cómo muevo el button del div con id de two al div con id de one cuando hago clic en el botón?
<div id="one"> </div> <div id="two"> <button onclick="moveMe"></button> </div> function moveMe() { // ?? }Podemos hacer esto usando las funciones appendChild removeChild . Proporcionó un ejemplo a continuación con código de trabajo.
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> 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>Puedes probar esto:
// 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); }