JS getElementById创建的元素

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?";

Answer 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> 

Answer 2

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