This was a head scratcher
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.
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 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?!
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.