Can JavaScript insert a new element without showing that element in the page source?

Some background: I’m making a puzzle, so I’m ok with doing some strange things (like disabling right-click) just to force players to use other methods to solve.

In one part I have an invisible element, and it gets placed randomly onscreen. It works exactly how I want it to, however all it would take is for a player to open dev tools and hover the element in the source to have it highlighted and know exactly where the element is on the page.

So I’m curious if there’s a way to insert the button to the page, but keep it out of sight in dev tools?

My current function for inserting the element, in case it’s relevant. I imagine if it’s possible, I will need to adjust this somehow.

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

I don’t want to hide all source code, as it’s actually a part of the puzzle to look in there. If there’s no way to hide the button like I’m asking, I will just have to find another way. Appreciate any insight!

>Solution :

but keep it out of sight in dev tools?

No, you cannot.

I will just have to find another way

• The only "other way" is to require your users to run Chrome with a system policy setting to disable Dev Tools – which is only possible if:

  • Your users are running Windows machines in an Active Directory Domain that you control and you set the necessary Group Policy setting.
  • Your users are running Windows machines using an MDM Profile that you control (which sets the same Policy setting).
  • Your users are running Chromebooks enrolled into the same G Suite account and you disabled Dev Tools in your device policy options.

• Another alternative is to require your users to access your application/quiz/test/etc via a Remote Desktop / VNC / etc session that runs Chrome remotely on a machine that does set the Group Policy.

  • There are <canvas>-based Remote Desktop clients now.

• Otherwise, provided it’s your HTML, JS and CSS that you’ve published to the public web then, no, you absolutely cannot stop users from using their machines to view and manipulate HTML, JS, and CSS the way they want to. That’s just how the free and open world wide web works.

  • After all, how else would ad-blockers work?