javascript - getElementsByClassName returns [] instead of asynchronous appended node

Question

(I ask my question again after the first one was terribly formulated)

I face the following problem:

<div class="testA" id="test1"></div>

The above written element is predefined. I now load a xml tree via XMLHttpRequest & Co. delivering the following response:

<response>
    <div class="colorSelector" id="0-0">
        <div class="gbSelector" id="1-0">
            <table style="none" id="2-0"></table>
        </div>
    </div>
</response>

I now append the first div using

request.responseXML.getElementsByTagName("response")[0]
                       .getElementsByTagName("div")[0]

into the predefined div

<div class="testA" id="test1">

The final document looks like this (checked using development tools):

<div class="testA" id="test1">
    <div class="colorSelector" id="0-0">
        <div class="gbSelector" id="1-0">
            <table style="none" id="2-0"></table>
        </div>
    </div>
</div>

When I now try to get the element <div class="colorSelector" id="0-0"> using getElementById("0-0") I get the expected result.

But using getElementsByClassName("colorSelector") returns [].

Did I miss something? Is it probably a leftover of the fact the nodes were of type Element and not HTMLElement?

Answer 1

colorSelector is commented out. JavaScript only works within the DOM, and commented out portions aren't in the DOM.