如何使用 JavaScript/Jquery 在链接标签内换行？答案

【问题标题】：How do I wrap text within a link tag using JavaScript/Jquery?如何使用 JavaScript/Jquery 在链接标签内换行？
【发布时间】：2015-01-05 15:42:20
【问题描述】：

这是我当前的代码：

<a class="mg_label_7" href="/" shape="">Hello</a>

我想拥有：

<a class="mg_label_7" href="/" shape=""><div id="hello">Hello</div></a>

所以我可以在不更改链接区域文本的其余部分的情况下操纵链接文本的背景。有没有办法用 JavaScript/jQuery 精确定位这段文本并插入一个 div 甚至是一个 span？

我已经尝试了大约 3 个小时，我最接近实现它的方法是使用

 var elem = document.getElementsByTagName('a')[0];

	var html = elem.innerHTML;

	elem.innerHTML = '<div class="red">'+ html + '</div>'

它成功地定位了我的代码中的一个链接并将其更改为跨度，但如果我尝试 getElementsByTagName 然后 getElementByClassName 并使用 mg_label_7 它将不起作用。代码中有重复的标记，我想针对所有这些标记。

我正在尝试操作 SharePoint Web 部件，所以我不确定它是否会阻止它被编辑。

【问题讨论】：

您是否希望在可能有更多文本时将仅单词“Hello”换行？如果不是——如果你想在链接中包含 all 文本——可以考虑在a 标签中添加一个额外的类并设置该类的样式。
@JamesDonnelly 我已经对其进行了编辑，以展示我迄今为止所做的尝试，并使其更加具体。

【解决方案1】：

您可以使用.wrapInner()

$('.mg_label_7').wrapInner('<div id="hello"></div>')

【讨论】：

这是正确的答案，如果多个元素的类为mg_label_7，则认为重复 ID 可能会出现问题，但这完全超出了问题的范围
@A.Wolff 我完全同意。提供的示例中有很多假设（只有一个 .mg_label_7 将永远存在。无论出于何种原因都需要唯一的 ID。可能是 javascript？），但这更接近问题中的 OP 代码。我倾向于尽量保持它尽可能接近原作
由于某种原因它不起作用 - 它与页面上的另一个类似实例一起工作，但不是我想要的。 mg_label_7 有多个元素，我想针对所有元素，这可能是它不起作用的原因吗？
@Emma 那是正确的。同一个文档中不能有多个具有相同 ID 的元素。您可能不得不改用一个类：$('.mg_label_7').wrapInner('<div class="hello"></div>')
@JosephMarikle 由于某种原因它仍然没有出现。我认为的另一件事是，由于 HTML 是由 JavaScript 生成的，因此我必须确保在生成元素后执行代码，因为它是 SharePoint Web 部件。你知道是否有办法确保这一点？