Question

我在HTML中有这段代码：

<a class="cta" href="URL" target="_blank">TEXT</a>

我尝试实现的是在链接标记内添加span标记，以便它看起来像这样：

<a class="cta" href="URL" target=_"blank"><span>TEXT</span></a>

我尝试使用prepend但似乎不适用于我的情况...

Answer 1

.html( function )是更改元素的html内容的好方法。函数中html变量中设置的元素的当前html内容，您可以在新添加的子项中设置它。

$("a.cta").html(function(i, html){
  return "<span>"+ html +"</span>";
});

span { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cta" href="URL" target="_blank">TEXT</a>
<a class="cta" href="URL" target="_blank">TEXT 2</a>

Answer 2

使用jQuery的.wrapInner( wrappingElement )：

$(".cta" ).wrapInner("<span></span>");

描述：围绕匹配元素集中每个元素的内容包装HTML结构。

.wrapInner()函数可以接受任何可以传递给$()工厂函数的字符串或对象来指定DOM结构。这个结构可以嵌套几层深，但应该只包含一个inmost元素。该结构将围绕匹配元素集中每个元素的内容进行包装。

来源：https://api.jquery.com/wrapInner/

Answer 3

在jquery中使用.wrapInner()

描述：围绕每个元素的内容包装HTML结构在匹配元素集合中。

 var con = $('.cta').text();
 $(".cta").empty().wrapInner("<span>"+con+"</span>");

http://api.jquery.com/wrapinner/

Answer 4

您必须先获取内容，然后将当前内容替换为您制作的内容！您可以使用$(".myClass")之类的classe选择器，然后使用所选目标上的$(".myClass").html("<p>My new HTML content</p>");方法替换文本：

$(document).ready(function() {
    $(".cta").html("<span>" + $(".cta").html() + "</span>");
});

这是一个JSFiddle，可以看到这一点

Answer 5

尝试以下方法：

$('a.cta').each(function(){
var text = $(this).text();//take the text from the link
$(this).html($('<span>',{text:text}));//create a span tag and append the text in it after that use html to append the span to the link tag
});

$('a.cta').each(function(){
var text = $(this).text();//take the text from the link
$(this).html($('<span>',{text:text}));//create a span tag and append the text in it after that use html to append the span to the link tag
})

span { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cta" href="URL" target="_blank">TEXT</a>
<a class="cta" href="URL" target="_blank">TEXT2</a>
<a class="cta" href="URL" target="_blank">TEXT3</a>

Answer 6

替换html()：

$(function() {
   $('.cta').html( '<span>'+$('.cta').html()+</span>' );
});

如何使用jQuery在链接标记内添加span？

6 个答案: