如何在多个component-inner-container类div的指定位置追加span标签

需求说明 #

现有多个带有.component-inner-container类的DOM结构（示例如下），需要给每个该类的div中添加<span class="type table-item-type">Type</span>标签，且该标签必须放在<span class="name table-item-name">标签之后。

示例DOM结构 #

<div data-component-id="nwv4kv9j5ct9" class="component-inner-container status-red " data-component-status="major_outage" data-js-hook="" id="nwv4kv9j5ct9">
   <span class="name table-item-name">JHP</span>
   <span class="service-tier table-item-tier"><a href="" target="_blank" onclick="event.stopPropagation()">Tier 2</a></span>
   <span class="tooltip-base tool tooltipstered" style="display: none;">?</span>
   <span class="component-status table-item-status-childs" title=""><span class="app-status bg-inactive">failing</span></span>
   <span class="tool icon-indicator fa fa-times tooltipstered"></span>
</div>
<div data-component-id="rtv4kv9j5cyu" class="component-inner-container status-red " data-component-status="major_outage" data-js-hook="" id="nwv4kv9j5ct9">
   <span class="name table-item-name">PHS</span>
   <span class="service-tier table-item-tier"><a href="" target="_blank" onclick="event.stopPropagation()">Tier 2</a></span>
   <span class="tooltip-base tool tooltipstered" style="display: none;">?</span>
   <span class="component-status table-item-status-childs" title=""><span class="app-status bg-inactive">degrading</span></span>
   <span class="tool icon-indicator fa fa-times tooltipstered"></span>
</div>

原代码问题分析 #

你提供的代码无法实现需求，问题出在以下几点：

• 设置类名方式错误：使用attr('className', 'type')不符合jQuery规范，应该用attr('class')或addClass()，且遗漏了table-item-type类。
• 插入范围错误：span.appendTo(".component-inner-container")会把新元素添加到所有匹配的容器中，导致每个容器被重复插入多个标签。
• 位置不符合要求：只是将元素追加到容器末尾，没有放在指定的name标签之后。

正确实现方案 #

方案1：jQuery实现 #

$('.component-inner-container').each(function() {
  // 创建带完整类名和文本的span元素
  const typeSpan = $('<span class="type table-item-type">Type</span>');
  // 定位当前容器内的name标签，将新元素插入到它后方
  $(this).find('.name.table-item-name').after(typeSpan);
});

方案2：原生JavaScript实现（无需jQuery） #

// 获取所有目标容器
const containers = document.querySelectorAll('.component-inner-container');
containers.forEach(container => {
  // 找到当前容器内的name标签
  const nameElement = container.querySelector('.name.table-item-name');
  if (nameElement) {
    // 创建新的span元素
    const typeSpan = document.createElement('span');
    typeSpan.className = 'type table-item-type';
    typeSpan.textContent = 'Type';
    // 插入到name标签之后
    nameElement.after(typeSpan);
  }
});

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