I'm learning knockout.js and trying to use an afterRender callback to apply behaviour to elements.

I don't understand what these #text elements are that show up in my console.log().

So UI looks like this:

Knockout binding like this:

<div id='categoriesTree' style=color:black>    

    <table class='categoriesEditor'>

        <tbody data-bind=template: { name: 'itemTmpl', foreach:children,  afterRender: myPostProcessingLogic2  }></tbody>

    </table>

</div>

Template:

<script id=itemTmpl type=text/html>

    <tr>

        <td>

            <div class=input-group cat-block style=margin-left: 3px; margin-bottom: 12px;>

                <label id=may-search-tags-lbl style=background-color:beige;visibility:hidden;margin:0;>Category Name</label>

                <input data-bind='value: Name' id=maynavsearchphrase type=text class=form-control

                       placeholder=Category name name=maynavsearchphrase

                       value= />



                <div class=input-group-btn btn-grp-70 cat-meth-off>

                    <button id=may-nav-tags-search-btn class=btn btn-default btnIcon may-tipped

                            type=button data-toggle=tooltip title=Delete Category>

                        <i class=glyphicon glyphicon-remove></i>

                    </button>

                    <button id=may-nav-search-search-btn class=btn btn-default btnIcon may-tipped

                            data-toggle=tooltip title=Add subcategories

                        data-bind='click: $root.addCategory'

                        type=button>

                        <i class=glyphicon glyphicon-expand></i>

                    </button>

                </div>

            </div>

        </td>

        <td data-bind=visible: children().length>

            <table>

                <tbody data-bind=template: { name: 'itemTmpl', foreach: children }></tbody>

            </table>

        </td>

    </tr>

</script>

Callback function:

 self.myPostProcessingLogic2 = function (elements) {

                console.log(elements);

            }

And then chrome dev tools console output:

What are the text elements in text, tr, text? There is no text element that is a sibling of tr. tbody can only contain tr's right?

If I drill into text I can see that it has an attribute of cells : HtmlCollection[2] both nodes of which are td. So it's almost like text = tr but if thats the case then why am I getting 3 sibling nodes to represent one row?