如何在不更改按钮图标的情况下更改按钮的文本

Question

我有一个带有 pause_circle_outline 实体化图标的“暂停”按钮，单击它时我想将文本更改为“恢复”并将图标更改为 play_circle_outline，但是当我尝试更改文本它更改了文本并删除了图标。这是我的代码片段示例：

jQuery(document).ready(function($){
  
  $(document.getElementById("pause_btn")).click(function(){
      document.getElementById("pause_btn").innerText = "Resume"
  });
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src = "Sources/js/select_require.js"></script>
    <script src = "Sources/js/routes.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <body>
    <a class="waves-effect waves-light btn" id="pause_btn">Pause<i class="material-icons right">pause_circle_outline</i></a>
  </body>
</html>

Answer 1

Both textContent and innerText remove child nodes when altered

Docs

也许将您的文本放在带有 ID 的 span 中并更改其 textContent?

这样你的 i 标签应该保持不变。

Answer 2

.innerText 是一种访问节点 innerHTML 的“安全”*方式，在您的情况下，它包括 Pause-文本以及 <i.../> 标签。

解决这个问题的一种方法是添加一个 span 来保存文本。 span 不会做任何事情（因为它们是内联元素并且默认情况下 formatted/shown 作为简单的文本元素），但它们有助于使文本document.querySelector!

可选择的节点

示例：

var playing = true

window.addEventListener("load", () => {
  document.querySelector("#pause_btn").addEventListener("click", () => {
      playing = !playing
      if(playing) {
        document.querySelector("#pause_btn span").innerText = "Pause"
        document.querySelector("#pause_btn i").innerText = "pause_circle_outline"
      } else {
        document.querySelector("#pause_btn span").innerText = "Resume"
        document.querySelector("#pause_btn i").innerText = "play_circle_outline"
      }
  });
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <body>
    <a class="waves-effect waves-light btn" id="pause_btn">
      <span>Pause</span>
      <i class="material-icons right">pause_circle_outline</i>
    </a>
  </body>
</html>

我还添加了一些额外的代码，使其可以多次点击！

*：在这种情况下，安全是指它不会受到名为 XSS 的安全问题的影响。通常，当您不明确需要更改 HTML 本身时，最好使用 innerText，但是如果您这样做：确保有 NO 用户可以输入被放入 innerHTML 中的内容的方式。我最初的意思只是写到 innerHTML 和 innerText 中的任何一个都会覆盖元素的任何内容，而 innerText 通常是两者中更安全的。

Answer 3

你试过把图标和文字一起放到innerHTML吗？

jQuery(document).ready(function($){
  
  $(document.getElementById("pause_btn")).click(function(){
      document.getElementById("pause_btn").innerHTML = 'Resume<i class="material-icons right">pause_circle_outline</i>'
  });
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src = "Sources/js/select_require.js"></script>
    <script src = "Sources/js/routes.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <body>
    <a class="waves-effect waves-light btn" id="pause_btn">Pause<i class="material-icons right">pause_circle_outline</i></a>
  </body>
</html>

如何在不更改按钮图标的情况下更改按钮的文本

How can i change a text of a button without changing it's icon

html

javascript

icons

button

materialize