gpt4 book ai didi

javascript - textContent 和innerHTML 不改变DOM

转载 作者:行者123 更新时间:2023-11-28 14:34:07 25 4
gpt4 key购买 nike

早上好,

我希望有人能帮我解决这个看似简单的问题。我不明白为什么我的 textContentinnerHTML 不会更新我的 DOM。它在我的控制台中显示它已经改变,但由于某种原因我无法理解为什么 DOM 没有改变。如有任何帮助,我们将不胜感激!

我有以下代码

        function updateText() {

document.querySelectorAll('.userRoleStyle').forEach(function (e) {

var grabtext = e.textContent || e.innerHTML;

if (grabtext === 'SUPER') {

grabtext = 'Super User';

}
console.log(grabtext);
})
};
    table td {
padding: 10px;
}
<body>
<table>
<thead>
<tr>

<th>Username</th>
<th>Email address</th>
<th>User Role</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>TEST1</td>
<td>test@test.com</td>
<td class="userRoleStyle">ADMINISTRATOR</td>
<td>
<a href="#" onclick="updateText();">Test</a>
</td>
</tr>
<tr class="userList">
<td>TEST2</td>
<td>test@test.com</td>
<td class="userRoleStyle">ADMINISTRATOR</td>
<td>
<a href="#" onclick="updateText();">Test</a>
</td>
</tr>
<tr class="userList">
<td>TEST3</td>
<td>test@test.com</td>
<td class="userRoleStyle">SUPER</td>
<td>
<a href="#" onclick="updateText();">Test</a>
</td>
</tr>
</tbody>
</table>
</body>

最佳答案

innerHTMLtextContent 基本上是 setter 和 getter。在变量中获取它们的引用并为该引用设置值不会调用 setter。

您需要直接为其设置值

e.textContent ? 
( e.textContent == 'SUPER' ? (e.textContent = 'Super User') : "" ) :
( e.innerHTML == 'SUPER' ? (e.innerHTML = 'Super User') : "" )

关于javascript - textContent 和innerHTML 不改变DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50289068/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com