阻止创建特定的HTML元素

Question

想象一下：我知道有时会创建一个id="cats"的元素，但是我不知道何时。

我可以删除这样一个已经存在的元素：

document.getElementById('cats').style.display = 'none';

但是，有什么方法可以在该元素存在之前将其阻止，从而永远无法创建它？ 还是在创建后立即检测并删除它？ （纯JavaScript答案具有优势）

重要说明：我无法编辑CSS

Answer 1

与其阻止创建的元素，不如不简单地将其隐藏在CSS中？

#cats { display:none }

Answer 2

如果您想使用纯JavaScript解决方案，则可以做两件事：

1. 找到一种监视DOM操作的方法。 跨浏览器不容易做到这一点。 这里有一篇关于它的文章： 检测DOM中的更改

2. 每隔一秒钟（或如此） 运行一个间隔并检查ID ，然后在创建ID之后即可将其快速删除。 请记住，这是很多开销。

 (function() { window.setInterval(function() { var elem = document.getElementById('cats'); if (elem) { elem.parentNode.removeChild(elem); } }, 1000) }()); (function () { button = document.getElementById('creator'); button.addEventListener('click', function () { var element = document.createElement('div'); element.id = 'cats' document.body.appendChild(element); }) }()); 

 #cats { background: red; width: 100px; height: 100px; } 

 <button id="creator">Create Element</button> 

通常，您应该能够控制由谁或什么来操纵DOM，因此首先可以避免创建。

Answer 3

结合Hugos display：none;-解决方案，并在要引入具有该ID的元素时检查ID是否已在使用（如果已使用，请从DOM中将其删除）。 css规则不会阻止在DOM中创建具有该id的元素，因此仍然有可能在开始采取行动之前创建具有该id的元素。