如何使用JavaScript将<a>标签整体包裹在<h1>标签内？

你可以通过原生JavaScript或者jQuery快速实现该需求，以下是两种方案的具体代码：

原生JavaScript实现（无需引入第三方库） #

// 确保DOM加载完成后再执行操作
document.addEventListener('DOMContentLoaded', function() {
  // 选中你要包裹的a标签元素
  const targetLink = document.querySelector('.clickable_element');
  // 创建h1容器
  const h1Container = document.createElement('h1');
  // 将h1插入到a标签的原位置
  targetLink.parentNode.insertBefore(h1Container, targetLink);
  // 将a标签移动到h1内部
  h1Container.appendChild(targetLink);
});

jQuery实现（代码更简洁） #

如果你的项目已经引入了jQuery，直接调用wrap方法即可：

$('.clickable_element').wrap('<h1></h1>');

注意事项 #

• 如果页面内存在多个类名为clickable_element的元素，需要把querySelector替换为querySelectorAll，遍历所有匹配元素逐个执行包裹逻辑
• 原生JS代码建议放在DOMContentLoaded事件回调中，或者放在body标签闭合前的位置，避免页面未渲染完成找不到目标元素的问题

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