javascript - 使用 jQuery 将 <a> 文本字符串转换为 dom 元素

Question

如何将链接中的文本转换为 html 元素？

我将文本定位为 <code>$('a').text();</code> 它返回值，但我无法向其中添加元素。

我已经尝试过这个:

var someText = $('a').text();
var theElement = $('< p >' + someText + '< /p >');
someText.replaceWith(theElement);

<小时/>

我知道这应该会在链接内添加一个文本元素，这不是最佳实践，但即使这样也行不通。

我真正需要的是删除整个文本并在取消链接后立即将其重写为文本元素。

感谢任何帮助。谢谢

标记:

<li>
<a href="/"> <img src="image.png"> text to be converted to element </a>
</li>

我想要什么:

<li>
<a href="/"> <img src="image.png"></a>
<p> text to be converted to element </p>
</li>

Answer 1

由于 someText 是一个字符串，而不是 jQuery 元素，因此您无法对其调用 .replaceWith() 。尝试这样的事情:

var someLink = $('a');
var someText = someLink.text();
var theElement = $('<p>' + someText + '</p>'); // no spaces inside tags
someLink.replaceWith(theElement);

http://jsfiddle.net/0xxrL6zy/

<小时/>

更新由于您向问题添加了新信息，因此这里有一个满足您需求的解决方案:

var someLink = $('a');
var someText = someLink.text();
var someImg = someLink.find('img');
var theElement = $('<p>' + someText + '</p>');
someLink.html(someImg).after(theElement);

http://jsfiddle.net/mblase75/mzbtr0qp/1/