As far as I know document.getElementById('myId') will only look for HTML elements that are already in the document. Let's say I've created a new element via JS, but that I haven't appended it yet to the document body, is there's a way I can access this element by its id like I would normally do with getElementById?

var newElement = document.createElement('div');
newElement.id = 'myId';
// Without doing: document.body.appendChild(newElement);
var elmt = document.getElementById('myId'); // won't work

Is there a workaround for that? (I must tell that I don't want to store any reference to this particular element, that's why I need to access it via its Id)

Thank you!

As far as I know document.getElementById('myId') will only look for HTML elements that are already in the document. Let's say I've created a new element via JS, but that I haven't appended it yet to the document body, is there's a way I can access this element by its id like I would normally do with getElementById?

var newElement = document.createElement('div');
newElement.id = 'myId';
// Without doing: document.body.appendChild(newElement);
var elmt = document.getElementById('myId'); // won't work

Is there a workaround for that? (I must tell that I don't want to store any reference to this particular element, that's why I need to access it via its Id)

Thank you!

• javascript
• getelementbyid

• If you've created it, just pass the object to other functions and access it directly? – s_hewitt Commented Jul 2, 2009 at 23:12
• @s_hewitt: This doesn't apply to the OP, but if you're like me, you can't "just pass it" because you lack the reference to it. (You created it using innerHTML or some library's equivalent.) In that case, you're trying to get a reference, but getElementById is unhelpfully located on the wrong object. – Thanatos Commented Jun 20, 2012 at 23:12

4 Answers 4

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 aren't necessarily in the DOM by using their relationship to other nodes, 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");

getElementById is a method on the document object. It's not going to return anything not in the document.

On not storing a reference, huh? If you could magically pull it out of the air by id, then the air would be a reference to it.

If you've created it, just pass the object to other functions and access it directly?

function createDiv()
{
  var newElement = document.createElement('div');
  doWorkWithDiv(newElement);
}

function doWorkWithDiv(element)
{
  element.className = 'newElementCSS';
  element.innerHTML = 'Text inside newElement';
  addToDoc(element);
}

function addToDoc(element)
{
  document.body.appendChild(element);
}