JavaScript动态创建带SVG图标按钮时图标无法显示问题求助

SVG 属于 SVG 命名空间下的 XML 元素，使用普通的 document.createElement 创建的节点属于 HTML 命名空间，浏览器不会将其识别为可渲染的 SVG 元素，因此出现代码结构看起来完全正常但图标不显示的问题。你在开发者工具中修改代码触发了浏览器重新解析 DOM，自动修正了命名空间属性，所以图标会正常显示。

方案1：修正原生 DOM 创建逻辑 #

创建 SVG 和 path 元素时，必须使用指定 SVG 命名空间的 createElementNS 方法，修改对应代码如下：

// 其他代码保持不变
// 创建path元素改为
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute('d','M20 4h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711v2zm-7 15.5c0-1.267.37-2.447 1-3.448v-6.052c0-.552.447-1 1-1s1 .448 1 1v4.032c.879-.565 1.901-.922 3-1.006v-7.026h-18v18h13.82c-1.124-1.169-1.82-2.753-1.82-4.5zm-7 .5c0 .552-.447 1-1 1s-1-.448-1-1v-10c0-.552.447-1 1-1s1 .448 1 1v10zm5 0c0 .552-.447 1-1 1s-1-.448-1-1v-10c0-.552.447-1 1-1s1 .448 1 1v10zm13-.5c0 2.485-2.017 4.5-4.5 4.5s-4.5-2.015-4.5-4.5 2.017-4.5 4.5-4.5 4.5 2.015 4.5 4.5zm-3.086-2.122l-1.414 1.414-1.414-1.414-.707.708 1.414 1.414-1.414 1.414.707.708 1.414-1.414 1.414 1.414.708-.708-1.414-1.414 1.414-1.414-.708-.708z')

// 创建svg元素改为
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
// 剩余属性设置逻辑保持不变

方案2：Vue 生态下更推荐的实现（避免手动操作 DOM） #

既然使用 Vue 技术栈，完全可以用数据驱动的方式实现动态新增附件的需求，不需要手动操作 DOM，也不会出现命名空间兼容问题：

1. 先在响应式数据中定义存储附件项的数组

data() {
  return {
    aCount: 0,
    attachmentList: []
  }
}

2. 模板中直接通过 v-for 渲染元素

<template>
  <div id="at-div">
    <div class="attachment-element mb-2" v-for="id in attachmentList" :key="id">
      <input type="file" class="form-control d-inline" :id="`at-${id}`">
      <button class="btn btn-danger col-3" style="vertical-align:top!important">
        <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 mb-1" fill="white" width="22" height="22" viewBox="0 0 24 24">
          <path d="M20 4h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711v2zm-7 15.5c0-1.267.37-2.447 1-3.448v-6.052c0-.552.447-1 1-1s1 .448 1 1v4.032c.879-.565 1.901-.922 3-1.006v-7.026h-18v18h13.82c-1.124-1.169-1.82-2.753-1.82-4.5zm-7 .5c0 .552-.447 1-1 1s-1-.448-1-1v-10c0-.552.447-1 1-1s1 .448 1 1v10zm5 0c0 .552-.447 1-1 1s-1-.448-1-1v-10c0-.552.447-1 1-1s1 .448 1 1v10zm13-.5c0 2.485-2.017 4.5-4.5 4.5s-4.5-2.015-4.5-4.5 2.017-4.5 4.5-4.5 4.5 2.015 4.5 4.5zm-3.086-2.122l-1.414 1.414-1.414-1.414-.707.708 1.414 1.414-1.414 1.414.707.708 1.414-1.414 1.414 1.414.708-.708-1.414-1.414 1.414-1.414-.708-.708z"/>
        </svg>
      </button>
    </div>
  </div>
</template>

3. 新增附件方法直接操作响应式数组即可

methods: {
  addAttachment() {
    this.attachmentList.push(++this.aCount)
  }
}

内容的提问来源于stack exchange，提问作者Mahmoud Mahmoud