jQuery .html() removing html elements

Question

I am setting a variable to the full contents of a <tbody>, after filtering the table I want to be able to return to the original full contents of the <tbody>. Currently, when I try to change back to the original contents, jQuery is stripping the <script> <tr> and <td> elements.

JavScript

var contents= $("tbody").html();
//load of other functions
$("tbody").html(contents);

The contents looks a bit like this:

<script>alert("Hello");</script>
<tr>
    <td>A value</td>
    <td>Another value</td>
</tr>

When I attempt to revert back to this contents I get:

 A value
 Another value

So what exactly is the string result of $("tbody").html() placed at the end of your code? Is that what your last output is showing, with some result with no HTML tags at all? — nsanders
– nsanders, Commented Jan 6, 2012 at 19:22

nsanders · Accepted Answer · 2012-01-07 00:02:19Z

1

The technique you're using should work, as demonstrated by the following jsFiddle:

http://jsfiddle.net/GbSrV/

When running the fiddle, take a look at the JavaScript console. You'll note that the values returned by html() are as expected.

To debug your code, check the actual DOM using your browser's dev tools. What does the tbody look like before, during, and after the routine?

Also, what exact code are you using to check the restored tbody contents? I assume your poking the restored value in your debugger (or equivalent) using:

$("tbody").html()

If that's not the case, let us know.

You should be able to get your original code to work right. However, if you want you could try the following implementation alternative:

var contents$ = $("tbody").children().clone();
// load of other functions
$("tbody").empty().append( contents$ );

edited Jan 7, 2012 at 0:02

answered Jan 6, 2012 at 19:18

nsanders

12.8k3 gold badges43 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Over a year ago

The alternative implementation you offered worked perfectly, thanks! I had been inspecting the DOM and everytime certain tags would be removed, whilst others would be left e.g. <a>. Thanks again for your time!

Collectives™ on Stack Overflow

jQuery .html() removing html elements

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related