Find a dynamic added tag with javascript

Question

I am trying to see how to find a tag that was added dynamically within a table as so:

ParentTag= document.getElementById('parentdiv');
var newTag = document.createElement('div');
newTag.innerHTML="<span class="ImNew"></span>" 
ParentTag.appendChild(newTag);

How will I be able to find that tag in javascript, not leaning towards using jquery so no live recommendations please.. Trying to find that new tag in strictly javascript.

The tag I am referring to is the span tag

Answer 1

You could give your new tag an ID when you create it:

ParentTag= document.getElementById('parentdiv');
var newTag = document.createElement('div');
newTag.setAttribute('id','myNewID');
newTag.innerHTML="<span class="ImNew"></span>" 
ParentTag.appendChild(newTag);

Then later, just use that ID to find it:

var newTag = document.getElementById('myNewID');

Answer 2

Well, live wouldn't get you anywhere anyway, because it only works for events. Why doesn't something like document.getElementsByClassName('ImNew') not work?

Answer 3

Not sure if this is relevant, but isn't it the wrong way around to try to find it whilst the nice thing with dynamically created DOM objects is that you can actually access them via a previously stored reference (this case 'ParentTag') ?

Answer 4

As others have mentioned, why not just keep track of it or give it an id if you're going to need it later?

But anyway, this is how you could do a manual search (searching from back to front as you're adding the new items to the end).

var parent = document.getElementById("parentdiv")
for (var i = parent.childNodes.length - 1; i >= 0; i--)
{
    var el = parent.childNodes[i];
    if (el.nodeType == 1 &&
        el.nodeName.toLowerCase() == "div" &&
        el.firstChild &&
        el.firstChild.nodeName.toLowerCase() == "span" &&
        el.firstChild.className = "ImNew")
    {
        // el.firstChild is what you want
    }
}

Answer 5

That depends on what other elements exist in the element. You can for example get all span tags in the element and filter out the ones with a specific class name:

var parentTag = document.getElementById('parentdiv');
var spans = parentTag.getElementsByTagname('SPAN');
var filtered = [];
for (var i=0; i<spans.length; i++) {
  if (spans[i].className === 'ImNew') filtered.push(spans[i]);
}

If there is only one span tag with that class name in the element, the filtered array now cotnains a reference to that element.