基于href目标创建textNode（不使用jQuery）

嘿，我来帮你把这个功能补全！咱们的需求是不用jQuery，根据父级a标签的href值来修改它下面span的文本内容，直接上完整实现和说明：

完整代码示例 #

HTML结构 #

<html>
  <body>
    <a class="one" href="example.html">
      <span class="two">_____</span>
    </a>
  </body>
</html>

完整JavaScript实现 #

// 获取目标a标签的href属性值
const href = document.querySelector(".one").getAttribute("href");
// 获取所有class为"two"的span元素（支持多个span的情况）
const spanElements = document.querySelectorAll(".two");
// 定义要替换的目标文本
const targetText = "example";

// 补全判断逻辑：检测href是否以"exam"开头
if (href.startsWith("exam")) {
  // 遍历所有找到的span元素，逐个修改文本
  spanElements.forEach(span => {
    // 直接替换文本内容，这是最简洁高效的方式
    span.textContent = targetText;
    
    // 如果你坚持要用createTextNode的方式，也可以这么写：
    // span.textContent = "";
    // span.appendChild(document.createTextNode(targetText));
  });
}

关键细节说明 #

• 元素定位：用document.querySelector精准获取单个a标签；如果页面可能存在多个class为two的span，用querySelectorAll批量获取，单个span的话直接用document.querySelector(".two")更高效
• 判断逻辑：href.startsWith("exam")用来检测href是否以指定字符串开头，你可以根据实际需求调整（比如要匹配完整的example.html，可以改成href === "example.html"）
• 文本修改：textContent是修改元素文本最直接的方法，比创建文本节点再追加更简洁；如果一定要用createTextNode，记得每次克隆节点（cloneNode(true)），避免同一个文本节点被多次添加导致只显示一次

简化版（单span场景） #

如果页面中只有一个class为two的span，代码可以进一步精简：

const href = document.querySelector(".one").href; // 直接读取href属性，无需getAttribute
const span = document.querySelector(".two");

if (href.startsWith("exam")) {
  span.textContent = "example";
}

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