JS getElementById on created element

Question

I'm not sure if this is possible, but I am creating an element using document.createElement, then appending child elements to that variable to build a sort of template prior to adding it to the page. As such, this element is not in DOM yet. I'd like to be able to directly access the child elements by their ID, rather than trying to use the children property to find them. Is it possible to use something like element.getElementById to find child elements within that parent element before it's added to DOM, as if it were its own mini-DOM?

rough example:

var parentElmt = document.createElement('DIV');
var childElmt = document.createElement('DIV');
childElmt.id = "child1";
parentElmt.appendChild(childElmt);
parentElmt.getElementById('child1').innerHTML = "Does this work?";

You can also use DocumentFragment. developer.mozilla.org/en-US/docs/Web/API/DocumentFragment. — Madmadi
– Madmadi, Commented Nov 27, 2018 at 23:45
The DOM spec says that implementing getElementById() on element is not web compatible - i.e. A significant number of existing web pages would break if element.getElementById() worked. So use querySelector instead as per Jaeeun Lee's answer. — Alohci
– Alohci, Commented Nov 27, 2018 at 23:46

Mark · Accepted Answer · 2018-11-27 23:38:28Z

1

If you already have a reference to the child element, you should just use that:

var root = document.getElementById("root")

var parentElmt = document.createElement('div');
var childElmt = document.createElement('div');
childElmt.id = "child1";
parentElmt.appendChild(childElmt);

// you already have the ref to childElmt.
childElmt.innerHTML = "Does this work?";

root.appendChild(parentElmt)

<div id="root"></div>

Alternatively you could reselect the child.

var root = document.getElementById("root")

var parentElmt = document.createElement('div');
var childElmt = document.createElement('div');
childElmt.id = "child1";
parentElmt.appendChild(childElmt);

// you can use querySelector
let ch = parentElmt.querySelector("#child1")
ch.innerHTML = "Does this work?";

root.appendChild(parentElmt)

<div id="root"></div>

answered Nov 27, 2018 at 23:38

Mark

92.7k8 gold badges116 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ceetch Over a year ago

I didn't realize the reference was still valid. I'm trying to create a dynamic form that is generated after several selections are made. Is it possible to store these element references in an object/array and reference them later? For example, make a function that creates a block of elements and adds it to an object, so if the selections change, that element could be removed from the object later. For example, obj[0] = parentElmt; Then later... rootElmt.appendChild(obj[0]);

Mark Over a year ago

Yes @Ceetch, they are just javascript Objects, you can store them, pass them to functions, etc. It will certainly be faster (and less code) than searching for them again.

Jaeeun Lee · Accepted Answer · 2018-11-27 23:41:28Z

1

If your goal is just to select the child element, you can use querySelector, like so:

parentElmt.querySelector('#child1')

You can use getElementById only on the document.

Unlike some other element-lookup methods such as Document.querySelector() and Document.querySelectorAll(), getElementById() is only available as a method of the global document object, and not available as a method on all element objects in the DOM. Because ID values must be unique throughout the entire document, there is no need for "local" versions of the function.

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById#Notes

answered Nov 27, 2018 at 23:41

Jaeeun Lee

3,21611 gold badges43 silver badges61 bronze badges

2 Comments

Ceetch Over a year ago

I can understand the logic that getElementById shouldn't need to be applied to anything by the global document, it doesn't factor in elements that aren't part of the global DOM yet. querySelector sounds like a good option as long as the child elements get an ID before I lose track of them.

Jaeeun Lee Over a year ago

It's not like you shouldn't need to apply to anything but the document, but you can't. You can also use a class with querySelector like this: parentElmt.querySelector('.child1') @Ceetch

Collectives™ on Stack Overflow

JS getElementById on created element

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related