Use getElementById for elements that are not [yet] in the DOM?

If it isn't part of the document, then you can't grab it using document.getElementById. getElementById does a DOM lookup, so the element must be in the tree to be found. If you create a floating DOM element, it merely exists in memory, and isn't accessible from the DOM. It has to be added to the DOM to be visible.

If you need to reference the element later, simply pass the reference to another function--all objects in JavaScript are passed by reference, so working on that floating DOM element from within another function modifies the original, not a copy.

For anyone stumbling upon this issue in or after 2019, here is an updated answer.

The accepted answer from Andrew Noyes is correct in that document.getElementById won't work unless the element exists in the document and the above code already contains a reference to the desired element anyway.

However, if you can't otherwise retrieve a direct reference to your desired element, consider using selectors. Selectors allow you to retrieve nodes that exist purely in memory, for example:

var child = document.createElement("div");
child.id = "my_id";

var parent = document.createElement("div");
parent.appendChild(child);

var child2 = parent.querySelector("#my_id");