无法对 JS 文件中构建的 div 使用羽毛图标答案

【问题标题】：Not able to use feather-icons for divs constructed in JS files无法对 JS 文件中构建的 div 使用羽毛图标
【发布时间】：2020-01-23 16:09:22
【问题描述】：

我在 vanilla js 项目中使用羽毛图标。当我在 html 正文中声明脚本 feather.replace() 时，图标会正确显示。但是，我在 JS 中动态创建某些 div。图标没有显示在这些 div 中。

<!DOCTYPE html>
<html>
 <head>
    <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
 </head>
 <body>
    <div class="wrapper>
    </div>

    <script>
      feather.replace()
    </script>
    <script src="./js/script.js"></script>
 </body>
</html>

我的js函数：

let newInputWrapper = document.getElementById("wrapper");
  newInputWrapper.innerHTML += `
    <div class="input-wrapper">
        <div class="input-box">
            <input type="text" class="input">
            <div class="input-icon font-color" id="${newAddID}" onClick="onAddNewCategory(this.id)">
                <i data-feather="plus"></i>
            </div>
            <div class="input-icon font-color" id="${newdeleteID}" onClick="onRemoveNewCategory(this.id)">
                <i data-feather="trash"></i>
            </div>
            <div class="input-icon font-color">
                <i data-feather="chevron-right"></i>
            </div>
        </div>
    </div>
   `

【问题讨论】：

标签： javascript ecmascript-6 icons

【解决方案1】：

您需要在正文末尾调用feather.replace() 来解析任何动态添加的元素。

<!DOCTYPE html>
<html>
 <head>
    <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
 </head>
 <body>
    <div class="wrapper>
    </div>

    <script src="./js/script.js"></script>
    <script>
      feather.replace()
    </script>
 </body>
</html>

【讨论】：