如何用jQuery将图片data-title属性值包裹在span标签中？

你之前的写法问题在于，.append($("<span>"))是在目标span的现有内容后面添加空span，而不是把已有内容包裹起来。要实现把data-title值用span包裹，应该在设置HTML内容的时候就直接构造好带span的结构，而不是先塞文本再追加标签。

给你两种可行的写法：

方法一：用模板字符串构造HTML（简洁直观） #

// 先获取data-title的值
const imgTitle = $(currentSelection).children("img").attr("data-title");
// 直接把值包裹在span标签里，设置到目标元素中
$(currentSelection)
  .closest(".img-to-select")
  .prevAll(".custom-title")
  .find("span")
  .html(`<span>${imgTitle}</span>`);

方法二：创建jQuery元素后设置（更安全，避免XSS） #

如果data-title里可能包含特殊字符，推荐用这种方式，text()方法会自动转义特殊字符：

const imgTitle = $(currentSelection).children("img").attr("data-title");
// 创建新的span元素并设置文本
const $newSpan = $("<span>").text(imgTitle);
// 把新元素设置为目标span的内容
$(currentSelection)
  .closest(".img-to-select")
  .prevAll(".custom-title")
  .find("span")
  .html($newSpan);

这样替换后，目标位置的HTML结构就会和你原有模板里的<span><span>{{ $image->title }}</span></span>保持一致，实现data-title值被span包裹的效果。

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