我有以下标记:
<div class="print">
<p><a href="/">Printable Format</a></p>
</div>
但是,我想将“可打印格式”包装在:
<div class="print">
<p><a href="/"><span>Printable Format</span></a></p>
</div>
我看过几个例子,但它们似乎没有完成我想要的。
先感谢您!
- 乙
//
$('.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>';
如果要执行多个元素,则必须遍历数组
$('.print a').html(function(i, h){
return '<span>' + h + '</span>';
});
假设您想使用 jQuery 执行此操作:
var $span = $( "<span></span>" ), // Create element
$link = $( '.print > p > a' );
$span.text( $link.text() );
$link.html( $span );
$('.print a').wrapInner('<span/>');
将产生:
<a href="/"><span>Printable Format</span></a>
这是 jQuery 参考:http ://api.jquery.com/wrapInner/
这是我的小提琴:http: //jsfiddle.net/tracyfu/bHVtg/
使用纯 Javascript 你可以试试这个
var elem = document.getElementsByClassName('print')[0]
.getElementsByTagName('a')[0] ;
var html = elem.innerHTML;
elem.innerHTML = '<span class="red">'+ html + '</span>' ;
工作小提琴 </p>
将 break-word 属性设置为 span。
示例 HTML:
<span class="wrapped-link"><a href="#">my link</a>
示例 CSS
.wrapped-link{
word-break: break-word;
}