javascript - 如何使用 Vanilla JS 从一个 div 中删除创建的节点并将其显示到另一个 div ？

Question

我创建了函数 add_item 来监听单击事件。每次单击按钮时，该函数都会创建一个 div 元素，并将一个新的 div 附加到输出 div(父节点)，当我单击创建的 div 之一时，将使用 delete_item 函数删除特定的子元素，但我真正想要的是现在想知道的是 如何获取删除的项目并将其添加到另一个 div 中，例如创建节点的 onclick 从输出 1 中删除精确的项目，然后仅使用 Vanilla Js 将其显示到输出 2 而不是 jQuery 。

var add_item_button = document.getElementById(`add_item_button`);
var output = document.getElementById(`output`);

add_item_button.addEventListener(`click`, add_item);

function add_item() {
  let create_div = document.createElement(`div`);
  create_div.setAttribute(`class`, `added_div`);
  output.appendChild(create_div);
  
  create_div.addEventListener(`click`, delete_item);
  function delete_item(){
  output.removeChild(create_div);
  } 
}

.added_div {
  background-color: #000;
  margin:5px;
  height: 50px; 
  width:50px;
  display:inline-block;
}

<button id="add_item_button">add item</button>
<div id="output"></div>

Answer 1

您可以使用output2.appendChild(create_div);

演示:

var add_item_button = document.getElementById(`add_item_button`);
var output = document.getElementById(`output`);
var output2 = document.getElementById(`output2`);

add_item_button.addEventListener(`click`, add_item);

function add_item() {
  let create_div = document.createElement(`div`);
  create_div.setAttribute(`class`, `added_div`);
  output.appendChild(create_div);
  
  create_div.addEventListener(`click`, delete_item);
  function delete_item(){
    output2.appendChild(create_div); // <-----------------------------
  } 
}

.added_div {
  background-color: #000;
  margin:5px;
  height: 50px; 
  width:50px;
  display:inline-block;
}

<button id="add_item_button">add item</button>
<div id="output"></div>
<div id="output2"></div>