如何通过JavaScript点击链接获取文本值并显示到指定HTML标签

你可以通过以下JavaScript代码完成需求，直接放在HTML的<script>标签里或者外部JS文件中即可：

// 获取带有confirm类的目标链接
const confirmLink = document.querySelector('.dropdown-item.confirm');
// 获取要更新的h5标签
const backdropLabel = document.getElementById('staticBackdropLabel');

// 给链接添加点击事件监听
confirmLink.addEventListener('click', function(e) {
  // 阻止链接默认跳转行为（避免页面滚动到顶部）
  e.preventDefault();
  // 获取链接的文本内容
  const linkText = this.textContent.trim();
  // 更新h5标签的内容
  backdropLabel.textContent = `You want to run ${linkText} ?`;
});

代码说明： #

• document.querySelector('.dropdown-item.confirm')：通过类名组合精准定位目标链接，避免选中其他同类元素。
• document.getElementById('staticBackdropLabel')：通过唯一id快速获取h5元素，这是定位元素最高效的方式之一。
• e.preventDefault()：拦截链接默认的跳转动作，因为你的链接href设为#，默认会触发页面滚动到顶部，这一步可以消除这个不必要的行为。
• this.textContent.trim()：提取链接的文本内容，trim()用于清除文本前后可能存在的空格，保证内容整洁。
• backdropLabel.textContent = ...：将h5标签的原有内容替换为包含链接文本的新内容。

额外提示： #

如果你的JS代码是放在HTML头部的，需要确保DOM加载完成后再执行代码，否则会出现无法获取元素的情况。可以用DOMContentLoaded事件包裹代码：

document.addEventListener('DOMContentLoaded', function() {
  // 上述核心代码放在这里
});

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