javascript - 使用javascript创建的按钮上的信息图标

我在javascript中创建了一个按钮。现在，我可以在上面添加按钮文本，但带有信息图标。

我已经使用javascript这样创建了一个按钮

<script>
function myFunction() {
 var x = document.createElement("BUTTON");
 var t = document.createTextNode("Click me");
 x.appendChild(t);
 document.body.appendChild(x);
}
</script>

现在，我知道＆＃9432是html信息图标实体

<button style="font-size:24px">Click me&#9432</button>

这段代码中的This is the output

上面的代码将产生所需的内容，即按钮名称+图标。

但是如果我这样做

var t = document.createTextNode("Click me"+"&#9432");

它只会在按钮上打印文本(＆＃9432)。我想在仅使用JavaScript的javascript创建的按钮中实现相同的功能。

我也尝试过

x.classList.add("fa fa-info-circle fa-6")

字体真棒类的信息图标，但它会引发错误。

Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('fa fa-info-circle fa-6') contains HTML space characters, which are not valid in tokens.

有没有办法在javascript中使用html实体或任何其他更简单的方法来实现相同目的。

谢谢，

最佳答案

您可以更改按钮的innerHTML而不是创建文本节点，因为文本节点按原样显示文本:

<button onclick="myFunction()">ADD ANOTHER BUTTON</button>

<script>
  function myFunction() {
    var x = document.createElement("button");
    x.innerHTML = "Click me &#9432;"
    document.body.appendChild(x);
  }
</script>

或者，您可以使用字符的unicode值，在您的情况下为\u24d8:

<button onclick="myFunction()">ADD ANOTHER BUTTON</button>

<script>
  function myFunction() {
    var x = document.createElement("button");
    var t = document.createTextNode("Click me \u24d8");
    x.appendChild(t);
    document.body.appendChild(x);
  }
</script>