时间戳

首页 > 解决方案 > 从 DOM 中删除元素后如何再次显示它？

javascript - 从 DOM 中删除元素后如何再次显示它？

问题描述

我正在尝试制作一个脚本，该脚本将隐藏聊天并在按下H按钮后再次显示它，但我不知道<div>在删除它后如何让网站中的元素再次显示。这是我的代码：

// ==UserScript==
// @name         Cytos Additions
// @namespace    http://tampermonkey.net/
// @match        https://cytos.io/
// @grant        none
// ==/UserScript==

var isToggled = false;

function doc_keyUp(e) {
  switch (e.keyCode) {
    case 72: // h
      if (isToggled) {
      
      }
      else {
        document.getElementsByClassName('_1FlWeEtrJKCnvzX-Y50CLP')[0].remove()
      }
      
      var isToggled = true;
      
      break;
    default:
      break;
  }
}

document.addEventListener('keyup', doc_keyUp, false);

我不知道该在if(isToggled)声明下放什么才能使聊天再次出现。

标签： javascripthtmltampermonkey

解决方案

移除的反义词是插入；有多种方法可以插入元素。由于您的元素位于 index 0，因此您需要将其添加到其原始父元素。

如果你只是删除一个元素而不保留它的引用，它将被垃圾收集，你不能再使用它了。所以存储对元素的引用；另外，将一个存储到其父级，因为这是您需要将元素添加到的目标。

const chatElement = document.getElementsByClassName('_1FlWeEtrJKCnvzX-Y50CLP')[0],
  chatParent = chatElement.parentElement;
let isToggled = false;

function doc_keyUp(e) {
  switch (e.code) {
    case KeyH:
      if (isToggled) {
        chatParent.prepend(chatElement);
      }
      else {
        chatElement.remove();
      }

      isToggled = !isToggled;

      break;
    default:
      break;
  }
}

document.addEventListener("keyup", doc_keyUp, false);

isToggled可以使用 来切换变量isToggled = !isToggled;，但不要在函数内重新声明变量，否则它将与您的外部isToggled变量无关。

请注意，keyCode已弃用。你应该code改用。

还有两个担忧：

  1. 如果 Cytos 依赖于现有的聊天，则删除该元素可能会导致应用程序中断。类似地，移除和重新插入元素可能会触发不可预见的事件。考虑case KeyH: chatElement.toggleAttribute("hidden"); break;改用。请参阅财产toggleAttribute上和上的文档。hidden
  2. 类名_1FlWeEtrJKCnvzX-Y50CLP看起来不像是一个稳定的类名，而是一个缩小的、随机化的名称。它很可能会发生变化，并且您的用户脚本很可能会中断。熟悉 DOM API，尤其是document.querySelector，并考虑寻找更稳定的选择器。

推荐阅读