Chrome开发者工具未显示动态DOM更新

Question

Chrome开发者工具未显示动态DOM更新

3

请问为什么我无法在输入框的高亮值字段中查看文本框更新？

文本框显示为“new1234”，但Chrome开发工具显示为“Old123”。

以下是HTML代码：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Test</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
<input id="testInput" type="text" value="Old123" />
</body>
<script>
    document.getElementById('testInput').value = 'New1234';
</script>
</html>

这是屏幕截图：

document.getElementById('testInput').value = 'New1234';

<input id="testInput" type="text" value="Old123" />

- fahmi

1

有过同样的问题，就我而言，我有一个重复的id。 - Eric

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CertainPerformance · Accepted Answer

JavaScript中的.value属性引用了HTMLElement对象上的一个属性，JavaScript可以与之交互。元素属性值不一定对应于在浏览器检查工具中看到的属性。如果需要，您可以通过setAttribute更改元素的属性。

（使用浏览器工具Inspect以下代码片段：）

document.getElementById('testInput').setAttribute('value', 'New1234');

<input id="testInput" type="text" value="Old123" />

然而，虽然这样做是有效的，但通常最好将属性分配给元素的纯Javascript属性，而不是更改HTML本身。

某些属性更改确实会更改属性，例如当您设置元素的id或className时：

const element = document.getElementById('testInput');
element.id = 'foo';
element.className = 'bar';

<input id="testInput" type="text" value="Old123" />

但是将值分配给.value不会更改HTML属性。