Hey folks, I’m working on improving our ad delivery system. I want to move our ad code to an external jQuery file, but I still need some HTML on the page for the script to target. I was thinking about using the content inside noscript tags since we have to keep those anyway for users without JavaScript.\n\nIs it possible for JavaScript to access or modify stuff inside noscript tags? Or do I need to add separate elements for my script to work with?\n\nFor example, if I have this:\n\nhtml\n<noscript>\n <div class="ad-container">\n <a href="example.com">\n <img src="ad-image.jpg" alt="Advertisement">\n </a>\n </div>\n</noscript>\n\n\nCan my script interact with the div or its contents? Or should I add another element outside the noscript tag for my script to target?\n\nAny advice would be super helpful! Thanks in advance!
hey, i’ve dealt with this before. noscript content isn’t visible to JS when it’s enabled. what i usually do is put a hidden div outside the noscript tag, like:
then my script can grab that div and do whatever. keeps things simple and works for everyone
As someone who’s worked extensively with ad systems, I can tell you that JavaScript can’t directly interact with content inside noscript tags. The browser doesn’t render noscript content when JavaScript is enabled, so your script won’t see those elements in the DOM.
Instead, I’d recommend creating a separate container for your ad that exists outside the noscript tags. You can style it to be hidden by default, then use your script to populate and display it. This approach gives you the best of both worlds - a fallback for users without JavaScript, and a container your script can easily target.
Something like this has worked well for me in the past:
<div id="ad-container" style="display:none;"></div>
<noscript>
<!-- Your existing noscript content -->
</noscript>
Then your script can target #ad-container to inject the ad content dynamically. This method keeps your markup clean and gives you more flexibility in how you handle the ad delivery.
I’ve encountered this issue before in my work on ad systems. JavaScript can’t interact with noscript content because browsers don’t render it when JavaScript is enabled. A more effective approach is to create a separate, hidden container for your ad outside the noscript tags. Your script can then populate and display this container dynamically.
Consider this structure:
<div id="ad-container" class="hidden"></div>
<noscript>
<!-- Existing noscript content -->
</noscript>
This method keeps your markup clean and provides flexibility for both JS-enabled and disabled scenarios. Your external script can easily target the ad-container, while the noscript content serves as a fallback. This approach has consistently yielded good results in my experience with ad delivery systems.