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;
  }
}

这是工作中的小提琴： 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

希望有帮助！

Answer 2

您可以通过HTML元素中的children属性访问children，并一次使用innerHTML，如下所示：

HTML

<div id="div1">
 <button id="btn1Active">Active</button>
</div>

JS

let divTarget = document.getElementById('div1'), 
child = divTarget.children[0],
btnActive = '<button id="btn1Active">Active</button>',
btnInactive = '<button id="btn1Inactive">Inactive</button>'

if (child.id == 'btn1Active') divTarget.innerHTML = btnInactive
else divTarget.innerHTML = btnActive

CodePen示例 https://codepen.io/bragamonte/pen/PBLojZ

无法更改innerHTML元素

2 个答案: