javascript - 无法更改 innerHTML 元素

Question

我想更改 td 标签内的按钮(请参阅底部的示例)。

var tableEntryButton = document.getElementById('slButton' + message.content[1])

正确提供我正在寻找的 td 元素:

<td id="slButtonAudi" data-value="false">
  <button id="slButtonActive" class="btn btn-outline-success btn-sm" type="button" onclick="handleClickOnSSButton(this)">Start</button>
</td>

这里是我的函数，应该使更改成为可能。在这里，我通过 button 标签中的 ID 来区分我可以应用的更改(删除当前的开始/停止按钮并添加具有相反功能的按钮)

var tableEntryButton = document.getElementById('slButton' + message.content[1])

let activeButton = '<button id="slButtonActive" class="btn btn-outline-success btn-sm" type="button" onclick="handleClickOnSSButton(this)">Start</button>'
let inactiveButton = '<button id="slButtonInactive" class="btn btn-outline-warning btn-sm" type="button" onclick="handleClickOnSSButton(this)">Stop</button>'

if (tableEntryButton.innerHTML.includes('slButtonActive')) {
  tableEntryButton.removeChild(tableEntryButton.firstChild)
  tableEntryButton.innerHTML = inactiveButton
}
else {
  tableEntryButton.removeChild(tableEntryButton.firstChild)
  tableEntryButton.innerHTML = activeButton
}

if/else 分配工作正常。

似乎只有 if/else 语句中的更改没有被应用。

这里举个例子来说明。

如果给出:

<td id="slButtonAudi" data-value="false">
  <button id="slButtonActive" class="btn btn-outline-success btn-sm" type="button" onclick="handleClickOnSSButton(this)">Start</button>
</td>

应该改为:

<td id="slButtonAudi" data-value="false">
  <button id="slButtonInactive" class="btn btn-outline-warning btn-sm" type="button" onclick="handleClickOnSSButton(this)">Stop</button>
</td>

Answer 1

您没有正确使用 innerHtml。

我为您提供了一个示例，它将完全按照您在上一个示例中的要求进行操作。

if (tableEntryButton.innerHTML.includes('slButtonActive')) {
  //Get the children button.
  let button = tableEntryButton.querySelector("#slButtonActive");

  if (button) {
    tableEntryButton.removeChild(button);
    tableEntryButton.innerHTML += inactiveButton;
  }
}

这是工作 fiddle : https://jsfiddle.net/vrtfoh9q/20/

一些文档: https://plainjs.com/javascript/manipulation/append-or-prepend-to-an-element-29/ https://www.w3schools.com/js/js_htmldom_nodes.asp

希望对您有所帮助!