如何使用JavaScript创建Ionic ion-icon图标元素？

完全可以用JavaScript创建ion-icon元素，你遇到的问题并非因为它是非标准HTML标签，而是动态创建自定义元素时的初始化流程问题。以下是几种可行的解决方法：

方法1：直接创建并添加ion-icon元素 #

避开innerHTML，直接用document.createElement创建ion-icon并设置属性，这种方式能确保自定义元素被浏览器正确初始化：

// 创建按钮元素
const dltButton = document.createElement('button');
// 创建ion-icon元素
const trashIcon = document.createElement('ion-icon');
// 设置图标名称属性
trashIcon.setAttribute('name', 'trash-outline');
// 将图标添加到按钮内
dltButton.appendChild(trashIcon);
// 把按钮挂载到DOM中（示例挂载到body，可替换为你的目标容器）
document.body.appendChild(dltButton);

方法2：确保自定义元素已注册 #

如果Ionic的脚本是异步加载的，可能在你创建元素时ion-icon还未完成注册。可以先检查元素是否已定义，或等待Web Components就绪后再创建：

// 封装创建按钮的函数
function createDeleteButton() {
  const dltButton = document.createElement('button');
  const trashIcon = document.createElement('ion-icon');
  trashIcon.setAttribute('name', 'trash-outline');
  dltButton.appendChild(trashIcon);
  document.body.appendChild(dltButton);
}

// 检查并执行创建逻辑
if (customElements.get('ion-icon')) {
  createDeleteButton();
} else {
  // 等待Web Components加载完成
  window.addEventListener('WebComponentsReady', createDeleteButton);
}

方法3：使用innerHTML的兼容写法（可选） #

如果坚持要用innerHTML，需要手动触发自定义元素的升级流程，确保浏览器识别并初始化ion-icon：

const dltButton = document.createElement('button');
// 直接使用未转义的标签字符串（无需转义<或"）
dltButton.innerHTML = '<ion-icon name="trash-outline"></ion-icon>';
// 手动升级自定义元素
if ('customElements' in window) {
  customElements.upgrade(dltButton.firstElementChild);
}
document.body.appendChild(dltButton);

补充说明 #

你之前的代码无效，核心原因不是转义字符串的问题，而是innerHTML插入的自定义元素可能不会自动触发初始化流程。直接通过document.createElement创建元素，浏览器会自动调用自定义元素的构造函数（如果已注册），这是最可靠的方式。

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