javascript - 动态更改包含跨度类的按钮文本

标签 javascript html

我遇到一个问题,我有一个按钮,我在其中根据点击更改它的文本。
按钮 附加了一个span
但是,当我更改 buttoninnerHTML/innerText 的值时,span 会被删除,并且 应该附带的图片>按钮没有出现。
我尝试添加 "className"'classList.add("text")',但它只是抛出一个错误。
所以我想知道是否有任何方法可以只更改 button 的文本而不影响 button 的 span 元素。

提前谢谢你:)

按钮是这样声明的

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

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

var showallButton=document.getElementById('btnShow');
if((showallButton.innerText).trim()=="Show All"){        
    showallButton.innerHTML="Hide All";
}else{
    showallButton.innerHTML="Show All";         
}

最佳答案

获取i标签后的textNode并更新其内容。

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>

关于javascript - 动态更改包含跨度类的按钮文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55575950/

相关文章:

javascript - 仅在填充新行时阻止表单提交

javascript - 当滚动到元素的类为 '#wrap' 时如何更改 css?

html - 使用纯 CSS 将元素的高度值设置为一行中的最大值

jquery - 将 codepen 网站移植到 github 页面 - 折叠的导航按钮不起作用

javascript - Firefox 中的“事件”等效项

javascript - 如何在 redux-form 7.0.0 中获取 <Field> 值

javascript - 使用 ES6 代理对象从目标对象检索属性时的符号与字符串

javascript - 如何将时间线图表与 ControlWrapper 绑定(bind)以过滤时间线

html - 如何将两个不同的图像放在一个 div 中。谁能帮我

JavaScript HTML5 : issue with drag-and-drop for a gmail-like upload interface