razer90 razer90 - 1 month ago 9
HTML Question

Html in chrome console is different from html in browser...how is it possible?

From a form, I stored in variables some values from input fields and in jquery using .html() I built a table like this:

var name = $('#name').val();
var age = $('#age').val();

$('table tbody').html('
<tr id="uniqueId">
<td id="name">name</td>
<td id="age">age</td>
</tr>'
)


Then I need to update the table, so I changed the data, I stored again the input field values in variables and with jquery I tried to replace the table with the new values like this:

$('#uniqueId').html('
<tr id="uniqueId">
<td id="name">NewName</td>
<td id="age">NewAge</td>
</tr>'
)


Something strange happened: html in the browser doesn't change, but if I look at chrome console, html is changed! I mean if I write in the console $('#uniqueId') it shows me the updated html, but if I use 'inspect' in the chrome console I can see just the old code.

Again: if I write in the console $('#uniqueId').html('HI'), the result is correct in the console, but nothing changes in the browser O_o

What's happened?! I tried to stored the new html code in another variable and then replace the old code like this:

var newCode = 'html code';
$('#uniqueId').html(newCode);


with no result..any idea?

Answer

You have a few issues that I'm noticing here.

1. You're using single quotes both for .html(' ... ');, and to declare the ID's within. Change it to .html(" ... ") instead.

2. Take a look at these lines in your first snippet...

var name = $('#name').val();
var age = $('#age').val();

<td id="name">name</td>
<td id="age">age</td>

<td> elements do not have a .val() property and should be referenced with .html(). That being said, you mentioned that you are getting the values from inputs. If that's the case, does this mean that you have duplicate element ID's?

3. Check out your snippet...

$('#uniqueId').html('
   <tr id="uniqueId">
   <td id="name">NewName</td>
   <td id="age">NewAge</td>
   </tr>'
)

This is going to cause issues. You're not only inserting a <tr> into a <tr>, but they have the same ID. I think you should be doing...

$('#uniqueId').html('
   <td id="name">NewName</td>
   <td id="age">NewAge</td>'
)
Comments