单击时移动按钮

Question

当我点击按钮时，如何将button从id为two的div移动到id为one的div？

<div id="one">

</div>

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

function moveMe() {
 // ??
}

Answer 1

我们可以使用removeChild 和appendChild js 特性来做到这一点。在下面提供了一个带有工作代码的示例。

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>

Answer 2

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>

Answer 3

你可以试试这个：

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

Answer 4

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

Answer 5

您可以使用下面的代码来移动元素。

我对您的代码进行了一些更改，

您可以使用版本 1 或版本 2

• 第一个版本的变化是我在元素上添加了“id”属性，所以我们不会只使用标签作为选择器，当然你也可以使用#two>按钮使其更精确
• 第二个版本的变化是我向你的函数添加了一个参数，这次它会在调用函数时使用“this”关键字处理当前元素

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>