Question

function select(){
  document.getElementById('container').style.border="2px solid red";
}
function pick(){
  document.getElementById('container').appendChild(document.getElementById('item'));
}

#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}

<html>
  <body>
    <p>Select the container and click the item to put it on the container</p>
    <div onclick="select()" id="container">Container</div>
    <br><br>
    <div id="item" onclick="pick()">Pick me</div>
  </body>
</html>

我希望能够单击该项目，并将其转到容器div，然后再次单击该项目，它将返回其原始位置。我可以撤消此过程吗？有没有更好的方法可以满足相同的目的？

Answer 1

您可以更改'pick'函数以检查item是否在容器中，如果是，则将其附加回body，如下所示：

function pick(){

  var item = doucumentgetElementById('item');
  var container = document.getElementById('container');
  if (item.parentElement == container)
  {
     document.body.appendChild(item);
  }
  else
  {
     container.appendChild(item);
  }
}

在第一次点击上 item移至container，在second click上移至body。

Answer 2

我认为您可以使用parentNode属性检查item div是否具有作为其父节点的容器div，如果有，则将其附加到主体（或需要放置的任何地方）。如果父项不是容器，则将其附加到容器中。

https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode

Answer 3

另一种解决方案：

为document.getElementById('container').parentNode.innerHTML保存一份副本，即使您可以将其保存到一个数组中，也可以一步一步地撤消。

然后在重置时将其分配回（如果将多个副本保存到一个阵列中，则分配最后一个副本，然后将其弹出）。

就像下面的演示一样：

let cloned = []

cloned.push(document.getElementById('container').parentNode.innerHTML)

function select(){
  cloned.push(document.getElementById('container').parentNode.innerHTML)
  document.getElementById('container').style.border="2px solid red";
}
function pick(){
  cloned.push(document.getElementById('container').parentNode.innerHTML)
  document.getElementById('container').appendChild(document.getElementById('item'))
}

function reset(){
  cloned && cloned.length > 0 && (document.getElementById('container').parentNode.innerHTML = cloned[0])
  cloned = [cloned[0]]
}

function undo(){
  cloned && cloned.length > 0 && (document.getElementById('container').parentNode.innerHTML = cloned[cloned.length-1])
  cloned.pop()
}

#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}

<html>
  <body>
    <button onclick="reset()">Reset</button>
    <button onclick="undo()">Undo</button>
    <p>Select the container and click the item to put it on the container</p>
    <div onclick="select()" id="container">Container</div>
    <br><br>
    <div id="item" onclick="pick()">Pick me</div>
  </body>
</html>

Answer 4

function select(){
  document.getElementById('container').style.border="2px solid red";
}
function pick(){
if(document.getElementById('container').contains(document.getElementById('item')))
{
var item = document.getElementById('item').cloneNode(true);
document.getElementById("container").removeChild(document.getElementById('item'));
document.getElementById('example').appendChild(item);
}
else
  document.getElementById('container').appendChild(document.getElementById('item'));
}

#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}

<html>
  <body id="example">
    <p>Select the container and click the item to put it on the container</p>
    <div onclick="select()" id="container">Container</div>
    <br><br>
    <div id="item" onclick="pick()">Pick me</div>
  </body>
</html>

Answer 5

我认为这是唯一的方法。

var savedElement;

function select(){
  document.getElementById('container').style.border="2px solid red";
  
  document.getElementById('container').removeChild(savedElement);
  
  document.getElementById('container').after(savedElement);
}
function pick() {
  savedElement = document.getElementById('item');
  document.getElementById('container').appendChild(savedElement);
}

#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}

<html>
  <body>
    <p>Select the container and click the item to put it on the container</p>
    <div onclick="select()" id="container">Container</div>
    <br><br>
    <div id="item" onclick="pick()">Pick me</div>
  </body>
</html>

Answer 6

您可以这样做：

function select(){
  document.getElementById('container').style.border="2px solid red";
}

// boolean to keep track of the position
var inside = false;
function pick(){
  if(!inside) {
    document.getElementById('container').appendChild(document.getElementById('item'));
    var getMeHere = document.getElementById('getMeBackHere');
    
  } 
  else {
     var pickMe = document.getElementById('container');
     document.getElementById('getMeBackHere').appendChild(document.getElementById('item'));
    
  }
  inside = !inside;
}

#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}

<html>
  <body>
    <p>Select the container and click the item to put it on the container</p>
    <div onclick="select()" id="container">Container</div>
    <br><br>
    <div id = "getMeBackHere"></div>
    <div id="item" onclick="pick()">Pick me</div>
  </body>
</html>

如何撤消DOM append（）方法

6 个答案: