代码之家  ›  专栏  ›  技术社区  ›  Shubhank Gupta

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

  •  2
  • Shubhank Gupta  · 技术社区  · 7 年前

    我用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");
    

    我也试过了

    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.
    

    谢谢

    3 回复  |  直到 7 年前
        1
  •  3
  •   DjaouadNM    7 年前

    您可以更改 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>
        2
  •  3
  •   Javier Menéndez Rizo    7 年前

    以下是您应该更改的内容,以使其适用于字体:

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

    类列表 方法: 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);
    }
    
        3
  •  1
  •   Victor    7 年前

    这个 createTextNode 方法创建一个文本节点并将内容显示为纯文本。要显示HTML,您需要使用 innerHTML

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