Insert a div into the specified html code to wrap it

Development
5

image
image341×428 9.94 KB

I guess it works – Can you share how you use this code?

However, we also have element changes in the same page. Therefore, I made some modifications to your code, which should meet the requirements:

const throttle = require("@ember/runloop").throttle;

const context = {
  wrapImg() {
    const avatarImages = document.querySelectorAll('img.avatar:not(.wrapped)');
    avatarImages.forEach(img => {
      // 创建一个新的 div 元素，并设置其类名为 by9700
      const wrapper = document.createElement('div');
      wrapper.className = 'by9700';
      // 将 img 元素移入到新的 div 中
      img.parentNode.insertBefore(wrapper, img);
      wrapper.appendChild(img);
      // 对 img 做标记
      img.classList.add("wrapped");
    });
  }
};

new MutationObserver(() => {
  throttle(context, context.wrapImg, 100);
}).observe(document.body, {
  childList: true, // 观察目标子节点的变化，是否有添加或者删除
  attributes: false, // 不观察属性变动
  subtree: true // 递归观察子节点
});