Verwenden Sie getElementById für Elemente, die [noch] nicht im DOM enthalten sind?

Question

Soweit ich weiß, wird document.getElementById ('myId') nur nach HTML-Elementen suchen, die sich bereits im Dokument befinden. Nehmen wir an, ich habe ein neues Element über JS erstellt, aber ich habe es noch nicht an den Dokumentkörper angehängt. Gibt es eine Möglichkeit, auf dieses Element mit seiner ID zuzugreifen, wie ich es normalerweise mit getElementById tun würde?

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

Gibt es einen Workaround dafür? (Ich muss sagen, dass ich keine Bezugnahme auf dieses bestimmte Element speichern möchte, deshalb muss ich darauf über seine Id zugreifen)

Vielen Dank!

Answer 1

Wenn es nicht Teil des Dokuments ist, können Sie es nicht mit document.getElementById greifen. getElementById macht eine DOM-Suche, so dass das Element in der Struktur gefunden werden muss. Wenn Sie ein Floating-DOM-Element erstellen, ist es nur im Speicher vorhanden und kann nicht vom DOM aus aufgerufen werden. Es muss dem DOM hinzugefügt werden, um sichtbar zu sein.

Wenn Sie später auf das Element verweisen müssen, übergeben Sie einfach den Verweis auf eine andere Funktion. Alle Objekte in JavaScript werden als Referenz übergeben. Wenn Sie also an diesem schwebenden DOM-Element innerhalb einer anderen Funktion arbeiten, wird das Original und keine Kopie geändert.

Answer 2

getElementById ist eine Methode für das Dokumentobjekt. Es wird nichts zurückgeben, was nicht im Dokument enthalten ist.

Nicht auf eine Referenz speichern, nicht wahr? Wenn du es magisch aus der Luft ziehen könntest, wäre die Luft ein Hinweis darauf.

Answer 3

Wenn Sie es erstellt haben, nur übergeben Sie das Objekt an andere Funktionen und greifen Sie direkt darauf zu?

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); 
}