It seems common to use the following HTML structure to accommodate users who have enabled/disable javascript:
<html>
<style>
div.body { display:none; }
.body > ... { ... }
</style>
<script>
document.onload( function() {
javascript(CONTENT => div.body);
});
</script>
<noscript>
<style>
body > :not(noscript) {
display:none;
}
</style>
</noscript>
<body>
<div class="body">
</div>
<noscript class="body">
CONTENT
</noscript>
</body>
</html>
The mechanism uses a <div>; whose display attribute, initially set
to none, is subsequently set to block|grid|etc. and populated with
CONTENT once the page is loaded; alongside a <noscript>; which is
pre-populated with CONTENT.
No one seems to suggest simply popping the CONTENT within
<noscript> into the <body> when javascript is available as follows
:
<html>
<style>
.body { ... }
.body > ... { ... }
</style>
<script>
document.onload( function() {
let noscript = document.querySelector("noscript");
noscript.outerHTML = noscript.innerHTML;
});
</script>
<noscript>
<style>
body > noscript {
display:content;
}
</style>
</noscript>
<body>
<noscript>
CONTENT
</noscript>
</body>
</html>
Here the CONTENT within noscript is displayed by default and if
there is javascript the tag is simply dropped; the specification
states the content of noscript should be parsable and that the parsed
result be readily assignable as noscript.outerHTML.
The first method requires one to repeat ones CONTENT in both the
noscript and wrapped into the javascript that populates the div;
this isn't especially DRY. I can't see that populating a page through
javascript calls is any faster then assigning ELEMENT.outerHTML; if
this is not true let me know. The second method relies upona bit of
CSS trickery. Finally both methods seem subject to flicker.
The only reasons I can think of for not using the latter structure are :
- SEO; I can't see how though e.g. you only have to scan
CONTENTonce, it sn't repeated, it isn't bundled between javascript, better aria/a11y support. - Frontend framework e.g. they all rely on the first structure
- historic reasons e.g. setting
noscript.outerHTMLbreaks events or something ut they are broken under the spec anyhow, jQuery.unwrap being a "recent" development, browser woes.