Question

我遇到一个问题，我有一个按钮，可以根据单击更改按钮的文本。
该${URL}附加了一个button。
但是，当我更改span的{{1}}的值时，innerHTML/innerText被删除，button附带的图片也不会出现。
我曾尝试添加span和button，但这只是抛出错误。
因此，我想知道是否有什么办法只能更改"className"的文本而不影响'classList.add("text")' button元素。

预先感谢您：）

这是声明按钮的方式

button's

我正在使用javascript并通过以下方式更改文本的值

span

Answer 1

在textNode标记后获取i，并更新其内容。

function pingall(){
  // get the i tag within button then get the text content
  // after the tag using nextSibling property
  var textNode = document.querySelector('#btnShow i').nextSibling;

  // check textContetnt property for updating or checking
  if ((textNode.textContent).trim() == "Show All") {
    textNode.textContent = "Hide All";
  } else {
    textNode.textContent = "Show All";
  }
}

<button id='btnShow' class='btn btn-info pull-right' onclick='pingall()'><i class='fa fa-desktop'></i>Show All</button>

Answer 2

之所以发生这种情况，是因为在按钮内有一个图标元素。

您可以将HTML更新为：

<button id='btnShow' class='btn btn-info pull-right' onclick='pingall()'><i class='fa fa-desktop'></i><span id="btn-text">Show All</span></button>

和JS一起：

var showallButtonText=document.getElementById('btn-text');
if((showallButtonText.innerText).trim()=="Show All"){        
    showallButtonText.innerHTML="Hide All";
}else{
    showallButtonText.innerHTML="Show All";         
}

Answer 3

domain.com替换HTML元素内的所有内容。
因此，在您的情况下，它会删除所有包含INNERHTML标签的内容，并添加“全部隐藏”或“全部显示”。
要仅替换文本，可以使用<span>元素的ID。

<span>

您还可以通过var textNode = document.querySelector('#idofyourspan');在<i>之后获得下一个元素

nextSibling

完整代码：

var textNode = document.querySelector('#btnShow i').nextSibling; // this should be your <span>

var textNode = document.querySelector('#btnShow i').nextSibling; // get the next sibling after <i> tag inside button

// check textContetnt property for updating or checking
if ((textNode.textContent).trim() == "Show All") {
  textNode.textContent = "Hide All";
} else {
  textNode.textConten = "Show All";
}
function pingall(){
// your code

}

更改按钮的文本以动态包含span类

3 个答案: