Javascript 如何撤消DOM append（）方法

函数选择（）{
document.getElementById（'container'）.style.border=“2px实心红色”；
}
函数pick（）{
document.getElementById（'container'）.appendChild（document.getElementById（'item'））；
}

#容器{
高度：100px；
宽度：100px；
边框：1px纯黑；
}
#项目{
高度：50px；
宽度：50px；
边框：1px纯黑；
背景：浅蓝色；
}

选择容器并单击项目以将其放置在容器上

容器



选我

您可以更改

'pick'

功能，以检查

项目是否在容器中，如果在容器中，请将其追加回
正文中，如下所示：

function pick(){

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

第一次单击时，
项
被移动到
容器
，第二次单击时，
项被移回
正文
，我认为您可以使用parentNode属性检查项div是否将容器div作为其父节点，如果是，则将其附加到正文中（或者附加到需要的任何位置）。如果项目节点父节点不是容器，则将其附加到容器中

另一种解决方案：

保存
document.getElementById（'container'）.parentNode.innerHTML的副本，即使您可以将其保存到一个数组中，它也可以支持一步一步撤消

然后在重置时，将其重新分配（如果将多个副本保存到一个数组中，请使用最后一个副本分配，然后将其弹出）

如下图所示：


let cloned=[]
克隆的.push（document.getElementById（'container'）.parentNode.innerHTML）
函数选择（）{
克隆的.push（document.getElementById（'container'）.parentNode.innerHTML）
document.getElementById（'container'）.style.border=“2px实心红色”；
}
函数pick（）{
克隆的.push（document.getElementById（'container'）.parentNode.innerHTML）
document.getElementById（'container'）.appendChild（document.getElementById（'item'））
}
函数重置（）{
cloned&&cloned.length>0&（document.getElementById（'container'）。parentNode.innerHTML=cloned[0]）
克隆=[cloned[0]]
}
函数undo（）{
cloned&&cloned.length>0&（document.getElementById（'container'）.parentNode.innerHTML=cloned[cloned.length-1]）
cloned.pop（）
}
#容器{
高度：100px；
宽度：100px；
边框：1px纯黑；
}
#项目{
高度：50px；
宽度：50px；
边框：1px纯黑；
背景：浅蓝色；
}

重置
撤消
选择容器并单击项目以将其放置在容器上

容器



选我

函数选择（）{
document.getElementById（'container'）.style.border=“2px实心红色”；
}
函数pick（）{
if（document.getElementById（'container'）。包含（document.getElementById（'item'））
{
var item=document.getElementById（'item'）.cloneNode（true）；
document.getElementById（“容器”）.removeChild（document.getElementById（“项”））；
document.getElementById（'example'）.appendChild（项）；
}
其他的
document.getElementById（'container'）.appendChild（document.getElementById（'item'））；
}
#容器{
高度：100px；
宽度：100px；
边框：1px纯黑；
}
#项目{
高度：50px；
宽度：50px；
边框：1px纯黑；
背景：浅蓝色；
}

选择容器并单击项目以将其放置在容器上

容器



选我
我认为这是唯一的方法


var保存删除；
函数选择（）{
document.getElementById（'container'）.style.border=“2px实心红色”；
document.getElementById（'container'）.removeChild（savedElement）；
document.getElementById（'container'）。在（savedElement）之后；
}
函数pick（）{
savedElement=document.getElementById（'item'）；
document.getElementById（'container'）.appendChild（savedElement）；
}
#容器{
高度：100px；
宽度：100px；
边框：1px纯黑；
}
#项目{
高度：50px；
宽度：50px；
边框：1px纯黑；
背景：浅蓝色；
}

选择容器并单击项目以将其放置在容器上

容器



选我
您可以执行以下操作：


函数选择（）{
document.getElementById（'container'）.style.border=“2px实心红色”；
}
//用于跟踪位置的布尔值
var内=假；
函数pick（）{
如果（！内部）{
document.getElementById（'container'）.appendChild（document.getElementById（'item'））；
var getMeHere=document.getElementById（'getMeBackHere'）；
} 
否则{
var pickMe=document.getElementById（'container'）；
document.getElementById（'getMeBackHere'）.appendChild（document.getElementById（'item'））；
}
内部=！内部；
}
#容器{
高度：100px；
宽度：100px；
边框：1px纯黑；
}
#项目{
高度：50px；
宽度：50px；
边框：1px纯黑；
背景：浅蓝色；
}

选择容器并单击项目以将其放置在容器上

容器



选我
检查我发布的答案可能重复。希望有帮助。