Question

I am adding a place holder div in my code so it can later be replaced by some html. This is for a little templating engine I am writing (something like handlebars.js) so I don’t have any control over what the parent element is.

Something like this:

<div class="container">
    <ul>
        <div id="4FEA2092330"></div>
    </ul>
</div>

if I get the parent of the placeholder div I get the ul which is great.

However if the placeholder is inside a table like this:

<div class="container">
    <table>
        <div id="4FEA2092330"></div>
    </table>
</div>

The parent of the placeholder div is the container div not the table.

Further testing shows that if I use a tr in the table (instead of the div) the parent routine returns the table.

Any ideas why that would happen and how I might be able to prevent this.

Answer 1

Your markup is invalid. A table can’t directly contain a <div> like that. The way to avoid the undesired behavior is to build a proper table.

I think it’d work to wrap your <div> in a <td>. The necessary other parts of the table will be implicitly added around that.