JS/jQuery新手求助：点击按钮通过DOM修改指定文本内容

嘿，刚接触JavaScript和jQuery的话，这个需求其实很好上手！先帮你理清楚思路：我们需要给id为btnChangeText的按钮绑定点击事件，然后找到页面里文本是“Change Me”的那个<span>，把它的内容改成“best”。另外先提一句，你的HTML里有个小笔误——<spna>应该改成<span>，不然可能会影响DOM导航哦。

下面给你两种实现方式，任选其一就行：

方法一：用jQuery实现 #

jQuery的语法更简洁，很适合新手快速上手：

$(document).ready(function() {
  // 给按钮绑定点击事件
  $('#btnChangeText').click(function() {
    // 通过文本内容找到目标span，然后修改文本
    $('span:contains("Change Me")').text('best');
    
    // 如果你想严格通过DOM导航（比如第二个p标签里的第二个span），也可以这么写：
    // $('div p:nth-child(2) span:nth-child(2)').text('best');
  });
});

解释一下：$(document).ready()确保页面DOM加载完成后再执行代码；click()监听按钮的点击动作；span:contains("Change Me")精准定位到包含指定文本的span元素；text('best')就是把它的内容替换成“best”。

方法二：用原生JavaScript实现 #

如果想锻炼原生JS的能力，也可以这么写：

document.addEventListener('DOMContentLoaded', function() {
  // 获取按钮元素
  const btn = document.getElementById('btnChangeText');
  
  btn.addEventListener('click', function() {
    // 方法1：通过文本内容查找
    const spans = document.querySelectorAll('span');
    spans.forEach(span => {
      if (span.textContent.trim() === 'Change Me') {
        span.textContent = 'best';
      }
    });
    
    // 方法2：通过DOM导航（第二个p标签的第二个span）
    // const targetSpan = document.querySelector('div > p:nth-of-type(2) > span:nth-of-type(2)');
    // if (targetSpan) {
    //   targetSpan.textContent = 'best';
    // }
  });
});

这里DOMContentLoaded和jQuery的ready()作用一样，确保DOM加载完成；querySelectorAll获取所有span，然后遍历找到文本匹配的那个；或者用querySelector通过DOM层级直接定位目标元素，更高效。

两种方法都能实现你的需求，你可以根据自己的熟悉程度来选～

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