JS-创建的元素上的getElementById

Question

I am trying to find an element with getElementById inside another element. Both elements were created with JS and have not yet been appended to the body. Sadly, I get the following error: myElement.getElementById is not a function .

Here is an example of what I am trying to do. Is there a way for this to work?

parentElement = document.createElement("div");
childElement = document.createElement("div");
childElement.id = "child";
parentElement .appendChild(childElement);

myElement = parentElement.getElementById("child");

For a more detailed example, this is what I am trying to do exactly: I am making a date picker from scratch (for funz) and I have an element which displays the month and year. You can change the month and year and I therefore need to change the innerHTML of this element when that happens. Instead of recreating the whole calendar, I thought it would be cleaner to just change the days and the month/year label. To do this, using getElementById().innerHTML seemed natural.

Answer 1

There is no getElementById method on DOM element. id has to be unique. So you can easily find it using document.getElementById .

Why do you try to get element by id when you already have it in childElement variable?

Answer 2

Turns out you can't getElementById() for elements that are not in the document.

The solution is to add an if/else condition to check if the element is in the body or not to get the results you want in both cases.

Saddly adds a few lines of code. It's no biggie but it would seem natural to use getElementById() since other functions like getElementsByClassName() work in cases like these. Maybe one day...