This was a head scratcher

All too often we become very comfortable with what we are doing, so when we stumble across some of the basics it becomes a very strange problem all of a sudden. That was exactly this problem, the answer was obvious but the problem was not due to the scenario. Recently I have been practicing with several JavaScript frameworks and I am so annoyed by all of them that I have finally just settled on using basic JavaScript, Html and jQuery where it makes sense.

Problem setup

The setup is simple really. I am adding table rows to the <tbody /> element of an html table. Nothing out of the norm. I am replicating a hidden table row template and using it as my basis for adding new rows. Here is where the confusion came into play; every time a row was being added some of the cell contents would disappear.

Template

This is an example of the template I was using. Looks clean and simple right?

<tr id="row_id0">
    <td>
        <span id="lblName_id0" style="display:inline-block;" />
        <input type="text" id="txtName_id0" style="display:none;" />
    </td>
</tr>

After render

After rendering the row, this is what would show up.

<tr id="row4">
    <td>
        <span id="lblName4" style="display:inline-block;" />
    </td>
</tr>

Where the hell did the <input> element go?

The jQuery I was using wasn’t the problem. I was completely baffled for about an hour and I tried adding more elements and changing the type of element. It wasn’t until I changed the order of the elements that it worked?! Why?!

The epiphany

If you didn’t catch it already, I made the <span> tag self closing which it is NOT. Therefore anything showing up after the self closing tag was not rendering. This was my fault, but no error was being thrown either which was very peculiar I would say. Long story short, be careful with your tags and don’t assume they can all self close like the <input> tag does.