基于下拉选择添加带URL的UAT Template标签遇两类问题求助

我需要给下拉选项操作添加一个名为「UAT Template」的URL标签，要求标签已存在时不再重复创建。目前遇到两个问题：

• 点击链接无法在新标签页打开
• 标签无法创建（原因未知）

原代码 #

function AddURL() {
  let lblTemplate = document.getElementsByClassName("ard-FormField-description")[8];
  
  //Check if the lblTemplate contain word 'UAT Template location'
  if (lblTemplate.innerHTML !== '' && lblTemplate.innerHTML.toLowerCase().indexOf('UAT Template Location') > -1) {
    if (lblTemplate.indexOf(lblTemplate) == -1) {
      // create anchor link element
      let link = document.createElement("a")

      // Create txt
      let txt = document.createTextNode("UAT Template Location")

      //append txt to anchor element
      link.appendChild(txt)

      // set the title
      link.title = " Click to UAT Template Location";

      // set the href property
      link.href = "https://gampoendev.com/:w:/r/teams/teamcollab/Shared%20Documents/Templates/";
      link.setAttribute('target', '_blank');

      // get text to add link to

      lblTemplate.appendChild(link)
    } else {
      return;
    }
  }
}

问题分析与修复 #

核心问题点 #

1. 标签无法创建：原代码中lblTemplate.indexOf(lblTemplate) == -1逻辑完全错误——DOM元素没有indexOf方法，这行代码会直接报错，导致后续创建链接的逻辑根本无法执行。
2. 新标签页打开失效：虽然设置了target="_blank"，但因为前面逻辑报错，链接根本没被创建，自然无法触发；另外用setAttribute设置属性不如直接赋值可靠，且缺少安全属性。

修复后的代码 #

function AddURL() {
  // 获取目标元素集合，先判断长度避免索引越界
  const descElements = document.getElementsByClassName("ard-FormField-description");
  if (descElements.length <= 8) return;
  const lblTemplate = descElements[8];

  // 检查元素是否包含目标文本（用textContent避免HTML标签干扰，统一小写匹配）
  const hasTargetText = lblTemplate.textContent.trim().toLowerCase().includes('uat template location');
  if (!hasTargetText) return;

  // 检查是否已存在对应链接，避免重复创建
  const existingLink = lblTemplate.querySelector('a[title*="UAT Template Location"]');
  if (existingLink) return;

  // 创建并配置链接元素
  const link = document.createElement("a");
  link.textContent = "UAT Template Location";
  link.title = "点击打开UAT模板位置";
  link.href = "https://gampoendev.com/:w:/r/teams/teamcollab/Shared%20Documents/Templates/";
  link.target = "_blank";
  link.rel = "noopener noreferrer"; // 防止新页面劫持，提升安全性

  // 将链接添加到目标元素中
  lblTemplate.appendChild(link);
}

修复细节 #

• 增加元素集合长度判断，避免因页面元素不足导致索引越界报错
• 替换错误的重复创建检查逻辑，用querySelector精准查找已存在的链接
• 改用textContent检查文本，避免HTML标签干扰判断结果
• 直接赋值target属性替代setAttribute，同时添加rel="noopener noreferrer"符合现代浏览器安全标准
• 简化文本匹配逻辑，用includes()替代indexOf更直观

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