# Insert a div into the specified html code to wrap it

**URL:** <https://meta.discourse.org/t/insert-a-div-into-the-specified-html-code-to-wrap-it/319942>\
**Category:** Development\
**Created:** [August 3, 2024, 6:34am UTC](https://meta.discourse.org/t/insert-a-div-into-the-specified-html-code-to-wrap-it/319942 "2024-08-03T06:34:55Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![sheng\_hualuo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sheng_hualuo/32/430359_2.png) [@sheng\_hualuo](https://meta.discourse.org/u/sheng_hualuo)\
**Post date:** [August 3, 2024, 10:17am UTC](https://meta.discourse.org/t/insert-a-div-into-the-specified-html-code-to-wrap-it/319942/6 "2024-08-03T10:17:44Z")

</div>

Thank you very much for your reply, I’ve found a workaround, use JavaScript code to detect an img tag with an avatar class and create a div tag with an avatar-wrappers class to wrap it, so that all the user’s avatars are surrounded by a newly created div, and then use pseudo-class elements to add different avatar frames for members of different user groups via user group css. Then automatically adjust the height and width of the avatar frame by identifying the width and height of the user’s avatar through JavaScript. This implements the website global avatar frame.  
I’ve shared the JavaScript code below

```plaintext
<script type="text/javascript">
  (function() {
    function wrapAvatars() {
      // 获取所有具有 avatar 类的 img 标签
      var avatars = document.querySelectorAll('img.avatar');

      // 遍历每个 img.avatar
      avatars.forEach(function(avatar) {
        // 检查 img 是否已经被包装过
        if (!avatar.parentNode.classList.contains('avatar-wrappers')) {
          // 创建一个新的 div 元素
          var wrapper = document.createElement('div');
          
          // 添加一个自定义类给新创建的 div 元素
          wrapper.className = 'avatar-wrappers';
          
          // 将 img.avatar 包装在新的 div 中
          avatar.parentNode.insertBefore(wrapper, avatar);
          wrapper.appendChild(avatar);
        }
      });
    }

    // 监听页面初次加载
    document.addEventListener('DOMContentLoaded', function() {
      wrapAvatars();

      // 使用 MutationObserver 监听 DOM 变化
      var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          if (mutation.addedNodes.length) {
            wrapAvatars();
          }
        });
      });

      // 配置观察器选项
      var config = { childList: true, subtree: true };
      
      // 开始观察文档的根元素
      observer.observe(document.body, config);
    });
  })();
</script>

<script type="text/javascript">
  (function() {
    function adjustWrapperSizes() {
      // 获取所有带有 avatar-wrapper 类的 div 标签
      var wrappers = document.querySelectorAll('div.avatar-wrapper');
      
      // 设置要增加的宽高值
      var widthIncrease = 9; // 例如，增加 20px
      var heightIncrease = 9; // 例如，增加 20px

      // 遍历每个 div.avatar-wrapper
      wrappers.forEach(function(wrapper) {
        // 获取当前 div 的子 img 元素
        var img = wrapper.querySelector('img');

        if (img) {
          // 获取 img 的实际宽度和高度
          var imgWidth = img.offsetWidth;
          var imgHeight = img.offsetHeight;

          // 计算新的宽度和高度
          var newWidth = imgWidth + widthIncrease;
          var newHeight = imgHeight + heightIncrease;

          // 设置 div 的宽度和高度
          wrapper.style.width = newWidth + 'px';
          wrapper.style.height = newHeight + 'px';
        }
      });
    }

    // 确保在 DOM 内容初次加载时执行
    document.addEventListener('DOMContentLoaded', function() {
      adjustWrapperSizes();

      // 使用 MutationObserver 监听 DOM 变化
      var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          if (mutation.addedNodes.length) {
            adjustWrapperSizes();
          }
        });
      });

      // 配置观察器选项
      var config = { childList: true, subtree: true };
      
      // 开始观察文档的根元素
      observer.observe(document.body, config);
    });
  })();
</script>

```

 ![屏幕截图 2024-08-03 181537](https://global.discourse-cdn.com/meta/original/4X/0/e/1/0e1e6bcfe6bdf21ab3d2c40caa6895265f706150.jpeg)

---

_[View the full topic](https://meta.discourse.org/t/insert-a-div-into-the-specified-html-code-to-wrap-it/319942)._