阻止创建特定的HTML元素

Question

Imagine this: I know that an element with id="cats" will be created sometime, but I don't know when.

I can remove an element that already exists like this:

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

But is there any way to block that element before it even exists , so it can never be created? Or detect and delete it immediately after it has been created? (pure JavaScript answers have advantage)

Important note: I can't edit CSS

Answer 1

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

#cats { display:none }

Answer 2

If you want to have a javascript only solution, you could do two things:

1. Find a way to watch for DOM manipulations. This is not easily be done cross browser. There is a post about it here: Detect changes in the DOM

2. Run an interval every seconds (or so) and check for the ID , then it can quickly be deleted, after it has been created. Keep in mind, that this is a lot of overhead.

 (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> 

Usually you should be able to control who or what manipulates the DOM, and thus be able to avoid the creation in the first place.

Answer 3

Combine Hugos display: none;-solution with a check if the id is already in use (and if so, remove it from the DOM) when you are going to introduce your element with that id. The css rule will not prevent the creation of an element with that id within your DOM, so there is still the chance that an element with this id could be created before you are getting to action.