使用removeChild和appendChild时元素未被移除或追加的问题

可能的原因及对应解决办法 #

1. 元素获取失败或DOM加载时机问题

虽然你使用了window.onload，但某些场景下页面内容可能异步加载（比如PHP渲染延迟、框架动态生成DOM），导致脚本执行时目标元素还未存在；或者脚本执行后，其他代码重新生成了目标元素，覆盖了你的修改。

解决办法：

• 改用DOMContentLoaded事件，它会在DOM结构加载完成后立即触发，无需等待图片等资源加载完毕：

document.addEventListener('DOMContentLoaded', function() {
  const userIcon = document.createElement('i');
  const accountLink = document.getElementById('account-link');
  const accountWrap = document.getElementById('account-link-wrap');

  // 先校验元素是否存在，避免报错中断执行
  if (!accountLink || !accountWrap) {
    console.error('未找到目标元素：account-link 或 account-link-wrap');
    return;
  }

  userIcon.className = "fa-light fa-user";
  // 使用replaceChild直接替换元素，逻辑更简洁
  accountWrap.replaceChild(userIcon, accountLink);
  console.log(userIcon);
});

• 把脚本放在HTML末尾（</body>标签前），确保DOM已经渲染完成再执行脚本。

2. Font Awesome图标未正确加载

如果页面没有引入Font Awesome的fa-light样式文件，你创建的<i>元素只会是空白状态，看起来像是没显示，但实际上元素已经被添加到DOM中。

解决办法：

• 确认页面已引入Font Awesome的对应样式文件，比如：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/light.min.css">

• 给图标元素添加显式样式确保可见：

userIcon.style.display = 'inline-block';
userIcon.style.color = '#000'; // 自定义颜色，确保和背景区分开

3. 其他脚本覆盖DOM内容

如果页面中有主题或插件的动态脚本，在你的脚本执行后重新渲染了account-link-wrap区域，会导致你的修改被覆盖。

解决办法：

• 延迟脚本执行时间，避开其他脚本的渲染时机：

document.addEventListener('DOMContentLoaded', function() {
  setTimeout(() => {
    // 原脚本逻辑
  }, 1000); // 延迟1秒执行，可根据实际情况调整时长
});

• 若使用WordPress等框架，可通过调整脚本加载优先级（比如wp_enqueue_script的依赖参数），确保你的脚本最后执行。

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