Question

I encounter a very strange situation with safari while not with other browsers (FF, IE, Chrome).

My HTML code is something like this:

<table id="tblObjectChannel"></table>

And my script is something like this:

var item = '<tr style="border-bottom:solid 1px #666;" id="xxxccc"><input type="hidden" id="hfObjectID0" value="2323" /></tr>';            

$('#tblObjectChannel').append(item);

In browsers other than Safari it will return like this:

<tbody><tr style="border-bottom: 1px solid rgb(102, 102, 102);" id="xxxccc"><input id="hfObjectID0" value="2323" type="hidden"></tr></tbody>

But in Safari it returns like this:

<tbody><tr style="border-bottom: 1px solid rgb(102, 102, 102);" id="xxxccc"></tr></tbody>

So, the hidden element is thrown away I don’t know where. Am I missing a hidden feature of .append() method here?

You can witness this yourself here: http://jsfiddle.net/mrMXS/
please try that link with FF and then with Safari. Any clue would be appreciated.

Thank you

Answer 1

Try putting some <td> elements around your hidden field – it’s not valid HTML without them.

See http://jsfiddle.net/alnitak/mdUeu/ – tested on Safari on MacOS X and it works as expected.