'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!

javascripthtml


Solution 1:[1]

How about filling the page with thousands of dummy nodes whose position in the DOM keeps changing every second?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kernel James

Related Questions