Question

我有以下标记：

<div class="print">
  <p><a href="/">Printable Format</a></p>
</div>

但是，我想在“

”中包含“可打印格式”

<div class="print">
  <p><a href="/"><span>Printable Format</span></a></p>
</div>

我看了几个例子，但它们似乎没有完成我正在寻找的东西。

提前谢谢！

乙

Answer 1

将.contents()与.wrap()

一起使用

// 
$('.print').find('a').contents().wrap('<span/>')
// same as $('.print a').contents().wrap('<span/>')

或wrapInner() - 它做同样的事情

$('.print').find('a').wrapInner('<span/>')
// same as $('.print a').wrapInner('<span/>')

@Alfo的纯JS示例

// returns an array of elements
var dtag = document.getElementsByClassName('print');
// gets first anchor tag inside first class=print
var atag = dtag[0].getElementsByTagName('a')[0];
// add span tag
atag.innerHTML = '<span>' + atag.innerHTML+ '</span>';

如果你想做多个元素，你将不得不循环遍历数组

http://jsfiddle.net/KkAkk/

Answer 2

$('.print a').html(function(i, h){
     return '<span>' + h + '</span>';
});

Answer 3

假设你想用jQuery做到这一点：

var $span = $( "<span></span>" ), // Create element
    $link = $( '.print > p > a' );

$span.text( $link.text() );
$link.html( $span );

Answer 4

$('.print a').wrapInner('<span/>');

将产生：

<a href="/"><span>Printable Format</span></a>

以下是jQuery参考：http://api.jquery.com/wrapInner/

这是我的小提琴：http://jsfiddle.net/tracyfu/bHVtg/

Answer 5

使用Pure Javascript，您可以试试这个

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

var html = elem.innerHTML;

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

<强> Working Fiddle

Answer 6

将break-word属性设置为span。

示例HTML：

<span class="wrapped-link"><a href="#">my link</a>

CSS示例

.wrapped-link{
    word-break: break-word;
}

如何在跨度内包装嵌套在锚标记中的文本？

6 个答案: