In Microsoft IE and (according to comments) Edge, getElementById() on an ID that is exactly "extTabsBodyEleFile1273551781_renderTo" fails.
<!DOCTYPE HTML>
<html>
<body>
<div id="extTabsBodyEleFile1273551781_renderTo"></div>
</body>
</html>
This ID was automatically generated. Changing the ID in any way fixes the problem. Getting the parent of the div and listing its child nodes also includes the div.
The error could be reproduced on both IE 11.0.9600.19155 and 11.0.9600.18538 - but it worked on another machine with IE 11...19155 without issues.
The error can also be reproduced if you open the developer console on a random site, change the ID of any element in the DOM explorer to the ID above and then try to get that element by document.getElementById('extTabsBodyEleFile1273551781_renderTo')
I realize that it is an Edge bug and fixing it would just mean changing the ID. My question is why it happens, why it didn't happen on one instance of Edge (I couldn't find setting differences) and how I could generate the ID to ensure it doesn't happen again. It's easy to change it at this place, but without knowing why it happened, it could happen again.
Is there a known hash or number combination an ID is not supposed to have? Is it a legacy setting that I could potentially turn off using meta tags?
I hope this question is not too unspecific for SO - Searching for it proved fruitless because of the legion of getElementById-related questions.
console.log(document.getElementById('extTabsBodyEleFile1273551781_renderTo'));
<div id="extTabsBodyEleFile1273551781_renderTo"></div>
Update:
It seems the ID fails in a case insensitive matter:
extTabsBodyEleFile1273551781_renderTo
exttabsbodyelefile1273551781_renderto
EXTTABSBODYELEFILE1273551781_RENDERTO
ExttAbsbOdyELEfILE1273551781_rEndErtO
All cause the error.
Update:
IE Developer console seems to be at least involved in the error. Opening a test HTML page that displays the result of trying to retrieve an Element by that ID inside itself instead of logging it to the console works as expected if IE was started with the console closed - until the console is opened and the page refreshed a couple (1-5) of times, whereupon the error appears again and persists until IE is closed and reopened. Closing the developer console after the error appeared seems not to have an effect.
Test HTML is hosted at netlify, HTML code:
<!DOCTYPE HTML>
<html>
<head>
<style>
table, th, td {border: 1px solid black;border-collapse: collapse;}
th, td {padding: 15px;}
</style>
</head>
<body>
<div id="extTabsBodyEleFile1273551781_renderTo"></div>
<div><p id="testresult"></p></div>
<script>
var testresults = document.getElementById('testresult');
var time = new Date().getTime();
testresults.innerHTML = "<h3>testresults:</h3><br><table><tr><th>ID</th><th>Result</th><th>Time</th></tr>" +
'<tr><td>extTabsBodyEleFile1273551781_renderTo: ' + "</td><td>" + document.getElementById('extTabsBodyEleFile1273551781_renderTo') + "</td><td>" + time + "</td></tr>" +
'<tr><td>extTabsBodyEleFile1273551781_renderTo through querySelector: ' + "</td><td>" + document.querySelector('*[id="extTabsBodyEleFile1273551781_renderTo"]') + "</td><td>" + time + "</td></tr>" +
'</table>';
</script>
</body>
</html>