添加svg并与javascript一起使用元素

我想只使用纯javascript添加一个图标。该图标在我的网络上是本地的，在html中显示如下：

 <svg class="pictogram pictogram-checkmark">

          <use xlink:href="/cdn/svg/v18/svg-icons.svg#checkmark" href="/cdn/svg/v18/svg-icons.svg#checkmark"></use>
      </svg>

---

我该如何改变这一点

假设您在某个地方有一个根svg元素，其中保存了您的定义（本例中的第一个svg元素），下面介绍如何创建一个新的svg元素和一个use元素来重用路径：

const SVG\u NS=http://www.w3.org/2000/svg';
常量SVG_XLINK=”http://www.w3.org/1999/xlink";
//创建一个新的svg元素
让svg=document.createElements（svg_NS，'svg'）；
setAttributeNS（null，“viewBox”，“0 0 24”）；
//添加新的svg元素
其中，appendChild（svg）；
//创建一个新的use元素
let use=document.createElements（SVG_NS，'use'）；
使用.setAttributeNS（SVG_XLINK，'XLINK:href'，'#checkmark'）；
//将新svg元素附加到svg元素
appendChild（使用）
svg{border:1px solid}
#根{位置：绝对；左：-10em；}
#其中svg{宽度：24px；高度：24px；}
#其中svg使用{fill:green；}
检查
您能详细说明一下吗？我有一个带有此html代码的当前图标。我想更改它，但只使用纯javascript。我想使用的图标有相同的代码剪贴，只是一些名称的变化。