如何使用jQuery将button按钮的文本/值包裹在span标签内

以下两种方案可根据实际场景选择：

• 基础场景方案
  你给出的按钮有专属类名single_add_to_cart_button，直接选中后调用wrapInner方法即可完成包裹：

$(document).ready(function() {
  $('button.single_add_to_cart_button').wrapInner('<span></span>');
});

• 多按钮场景方案
  如果页面存在多个同类名的按钮，可以增加文本过滤逻辑，只处理文本为「Buy Now」的按钮，避免误操作：

$(document).ready(function() {
  $('button.single_add_to_cart_button').filter(function() {
    return $(this).text().trim() === 'Buy Now';
  }).wrapInner('<span></span>');
});

最终效果 #

代码执行后，你的按钮结构会变成如下格式：

<button type="submit" name="add-to-cart" value="22706" class="single_add_to_cart_button button alt">
  <span>Buy Now</span>
</button>

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