Utilisez getElementById pour les éléments qui ne sont pas [encore] dans les DOM?

Question

Pour autant que je sais document.getElementById ( « myId ») ne cherchera des éléments HTML qui sont déjà dans le document. Disons que j'ai créé un nouvel élément via JS, mais que je ne l'ai pas joint encore au corps du document, est il y a une manière que je peux accéder à cet élément par son id comme je normalement faire avec getElementById?

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

Y at-il une solution de contournement pour cela? (Je dois dire que je ne veux pas stocker toute référence à cet élément particulier, c'est pourquoi je dois y accéder via son identifiant)

Merci!

Answer 1

Si elle ne fait pas partie du document, vous ne pouvez pas le saisir à l'aide document.getElementById. Fait une recherche getElementById DOM, de sorte que l'élément doit être dans l'arbre se trouve. Si vous créez un élément DOM flottant, il existe seulement dans la mémoire, et n'est pas accessible depuis les DOM. Il doit être ajouté au DOM pour être visible.

Si vous avez besoin de faire référence à l'élément plus tard, il suffit de passer la référence à une autre fonction - tous les objets JavaScript sont passés par référence, travaillant ainsi de cet élément DOM flottant à partir dans une autre fonction modifie l'original, pas une copie <. / p>

Answer 2

getElementById est une méthode sur l'objet document. Il ne va pas retourner quoi que ce soit pas dans le document.

ne pas stocker une référence, hein? Si vous pouviez par magie tirer de l'air par id, l'air serait une référence.

Answer 3

Si vous avez créé, juste passer l'objet à d'autres fonctions et y accéder directement?

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