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

Question

Soweit ich weiß document.getElementById ( ‚myid‘) wird nur für HTML-Elemente suchen, die bereits in dem Dokument sind. Sagen wir, ich habe ein neues Element über JS erstellt, aber ich habe es noch nicht auf dem Dokumentkörper angehängt, ist es eine Art, wie ich dieses Element durch seine ID zugreifen kann, wie ich 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 eine Abhilfe für das? (Ich muss sagen, dass ich möchte nicht auf diese besondere Element jede Bezugnahme speichern, deshalb habe ich es über seine Id zugreifen müssen)

Danke!

Answer 1

Wenn es nicht Teil des Dokuments ist, dann können Sie es nicht document.getElementById mit greifen. getElementById hat einen DOM-Lookup, so dass das Element im Baum sein muss gefunden werden. Wenn Sie ein Floating-DOM-Element erstellen, besteht es nur im Speicher und ist aus dem DOM nicht zugänglich. Es muss das DOM hinzugefügt werden sichtbar sein.

Wenn Sie später das Element verweisen, übergeben Sie einfach den Verweis auf eine andere Funktion - alle Objekte in JavaScript als Referenz übergeben werden, so arbeiten auf diesem schwimmenden DOM-Element innerhalb einer anderen Funktion ändert das Original, keine Kopie <. / p>

Answer 2

getElementById ist ein Verfahren, auf das Dokumentobjekt. Es ist nicht nichts in dem Dokument geht zurück.

Auf keinen Bezug zu speichern, nicht wahr? Wenn Sie auf magische Weise sie aus der Luft von id ziehen könnte, dann wäre die Luft ein Hinweis darauf sein.

Answer 3

Wenn Sie es erstellt haben, übergeben Sie einfach das Objekt zu anderen Funktionen und direkt zugreifen?

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