在chrome控制台的Html是不同的Html在浏览器..它怎么可能

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

本文关键字：Html 怎么可能 浏览器 是不同 chrome 控制台      更新时间：2023-09-26

从表单中，我在变量中存储了一些输入字段的值，并在jquery中使用.html()构建了一个表，如下所示:

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>'
)

然后我需要更新表，所以我改变了数据，我再次存储了变量中的输入字段值，并使用jquery尝试用新值替换表，如下所示:

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

奇怪的事情发生了:浏览器中的html没有改变，但是如果我看一下chrome控制台，html被改变了!我的意思是，如果我写在控制台$('#uniqueId')它显示我更新的html，但如果我使用'inspect'在chrome控制台我可以看到只是旧的代码。

再次

:如果我在控制台$('#uniqueId').html('HI')中写入，结果在控制台是正确的，但在浏览器中没有任何变化O_o

发生了什么? !我尝试将新的html代码存储在另一个变量中，然后像这样替换旧代码:

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

没有结果…你知道吗?

我在这里注意到你有几个问题。

1。对于.html(' ... ');，您使用单引号，并在其中声明ID。改为.html(" ... ")

2。看一下第一个代码片段中的这些行…

var name = $('#name').val();
var age = $('#age').val();
<td id="name">name</td>
<td id="age">age</td>

<td>元素没有.val()属性，应该与.html()引用。话虽如此，您提到您正在从输入获取值。如果是这种情况，这是否意味着您有重复的元素ID ?

3。查看您的代码片段…

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

这会导致问题。您不仅将<tr>插入<tr>，而且它们具有相同的ID。我认为你应该……

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

你的uniqueId可能并不是那么"独特"。检查整个HTML标记中是否只有一个ID。另外，出于测试目的，不要按id选择，而是按类名选择。如果这有效，那么不可否认你有多个'唯一'的id。

你的javascript代码是错误的。第一个声明:

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

然后在函数上:

$('#uniqueId').html("<tr id='uniqueId'> +
   "<td id='name'>NewName</td>" +
   "<td id='age'>NewAge</td>" +
   "</tr>'"
);
相关文章：