innerHTML update value but HTML rendering isn't changed

Issue

I misunderstand a JS Behavior, I want to update a td content in my HTML. So I created an anchor with onclick attribute.

When I update .innerHTML, the content is updated on javascript side, but is not rendered. I don't understand why.

<td class="data" id="<?php echo 'data_'.$_data['code']; ?>">A value</td>

document.getElementById("data_sku").innerHTML = "myNewValue";

After this, my HTML rendering doesn't change but when I use

document.getElementById("data_sku").textContent

I get "myNewValue";

I'm not comfortable with JS/Ajax behavior, just I don't understand why in this case, it's not working but in some other cases, it works.

Solution

I think that you have multiple elements with the same id in the document.

In such case you are changing and getting by the script only the first of them, but on the screen you can be looking on the other one, so see no changes observable from script.

document.getElementById("data_sku").innerHTML = "New content";
console.log(document.getElementById("data_sku").textContent);

<div id="data_sku" style="display: none;">First</div>
<div id="data_sku">Second</div>

Answered By - Qwertiy