如何将 fontawesome 添加到 javascript 元素？

Question

晚上好伙计们。 我正在准备一个待办事项应用程序。 我添加了删除按钮，但我想从 fontawesome 添加图标到删除按钮。 我到底需要在哪里添加 <i class="fa fa-trash" aria-hidden="true"></i>？ 如果你能帮助我，我会很高兴

  <body>
    <div class="container">
      <div id="newtask">
        <input type="text" id="myInput" placeholder="Title..." />
        <button onclick="newElement()">Add</button>
      </div>
    </div>
    <!--Script-->
    <script>
      var myNodelist = document.getElementsByTagName('LI');
      var i;
      for (i = 0; i < myNodelist.length; i++) {
        var span = document.createElement('SPAN');
        var txt = document.createTextNode('\u00D7');
        span.className = 'close';
        span.appendChild(txt);
        myNodelist[i].appendChild(span);
      }

      var close = document.getElementsByClassName('close');
      var i;
      for (i = 0; i < close.length; i++) {
        close[i].onclick = function () {
          var div = this.parentElement;
          div.style.display = 'none';
        };
      }

      function newElement() {
        var li = document.createElement('li');
        var inputValue = document.getElementById('myInput').value;
        var t = document.createTextNode(inputValue);
        li.appendChild(t);
        if (inputValue === '') {
          alert('You must write something!');
        } else {
          document.getElementById('newtask').appendChild(li);
        }
        document.getElementById('myInput').value = '';

        var span = document.createElement('SPAN');
        var txt = document.createTextNode('\u00D7');
        span.className = 'close';
        span.appendChild(txt);
        li.appendChild(span);

        for (i = 0; i < close.length; i++) {
          close[i].onclick = function () {
            var div = this.parentElement;
            div.style.display = 'none';
          };
        }
      }
    </script>
  </body>

Answer 1

这里有两件事要强调，

首先，删除列表项的代码片段并没有删除实际的项目，只是将其隐藏在呈现的HTML中，这是错误的。 您应该从文档中完全删除该元素。 下面的代码实际上并没有删除。

 close[i].onclick = function() { var div = this.parentElement; div.style.display = 'none'; };

其次，回答您关于使用<i>标签添加图标的问题。 如果您要动态添加它，则应该按照与<span>标记相同的方式来完成。 您必须对其父元素执行 createElement 和 append 操作。 您可以在 HTML 文档的<head>部分链接 fontawesome。 这是通用 CDN 链接。

 <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

对于上述链接的更新版本，您可以查看他们的官方网站。

如何将 fontawesome 添加到 javascript 元素？

问题描述

1 个解决方案

解决方案1
0 2022-12-04 21:35:18

如何将 fontawesome 添加到 javascript 元素？

问题描述

1 个解决方案

解决方案1 0 2022-12-04 21:35:18

解决方案1
0 2022-12-04 21:35:18