在拖放到JavaScript中的拖放目标后，如何将拖放的项添加到数组中，然后在HTML中显示它？

在拖放到JavaScript中的拖放目标后，我们可以通过以下步骤将拖放的项添加到数组中，并在HTML中显示它：

创建一个空数组来存储拖放的项。
在拖放目标元素上注册拖放事件的处理函数。
在处理函数中，使用event.dataTransfer.getData('text')来获取拖放的数据，这里假设拖放的数据是文本类型。
将获取到的数据添加到数组中，可以使用数组的push()方法来实现。
创建一个用于显示数组内容的HTML元素，例如一个<ul>列表。
在HTML中找到用于显示的目标元素，并将数组中的每个项都添加为列表项，可以使用DOM操作来实现，例如使用createElement()和appendChild()方法。
将目标元素插入到HTML文档中，以便显示更新后的列表。

下面是示例代码：

HTML：

<div id="dropzone">
  拖放到此处
</div>

<ul id="list"></ul>

JavaScript：

// 创建空数组
var items = [];

// 获取拖放目标元素
var dropzone = document.getElementById('dropzone');
// 注册拖放事件处理函数
dropzone.addEventListener('drop', handleDrop);

// 处理拖放事件的函数
function handleDrop(event) {
  // 阻止事件默认行为
  event.preventDefault();

  // 获取拖放的数据
  var data = event.dataTransfer.getData('text');

  // 添加到数组中
  items.push(data);

  // 获取用于显示的目标元素
  var list = document.getElementById('list');

  // 创建新的列表项
  var listItem = document.createElement('li');
  listItem.textContent = data;

  // 将列表项添加到目标元素中
  list.appendChild(listItem);
}

上述代码中，首先创建了一个空数组items来存储拖放的项。然后通过getElementById()方法获取拖放目标元素，并使用addEventListener()方法注册了拖放事件的处理函数handleDrop()。在处理函数中，通过event.dataTransfer.getData('text')获取拖放的数据，并将其添加到数组中。接着，通过getElementById()方法获取用于显示的目标元素，并通过DOM操作创建了一个新的列表项，并将其添加到目标元素中。最后，在HTML中预先定义了一个空的<ul>元素，用于显示列表项。

在实际应用中，可以根据具体的需求进行修改和扩展，例如可以支持拖放其他类型的数据、进行数据验证等。关于拖放和JavaScript的更多信息，可以参考MDN Web 文档。