Question

我在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实体或任何其他更简单的方法来实现这一点。

谢谢

Answer 1

您可以更改按钮的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>

Answer 2

createTextNode方法创建一个文本节点，并将内容显示为纯文本。要显示HTML，您需要使用innerHTML属性。另外，您错过了分号。

function createButton(html) {
  var btn = document.createElement('button');
  btn.innerHTML = html;
  document.body.appendChild(btn);
}

createButton('Click me &#9432;');

Answer 3

在此处应进行更改，以使其适用于超棒的字体：

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

classList 方法的文档链接：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Methods

最终结果

function myFunction() {
    var x = document.createElement("BUTTON");
    var t = document.createTextNode("Click me");
    x.classList.add("fa", "fa-info-circle", "fa-6");
    x.appendChild(t);
    document.body.appendChild(x);
}

使用javascript

3 个答案: