如何使用jquery在元素中添加元素

Question

我有一些像这样的代码：

<p>Nuno</p>
<p>Eimes</p>

我怎样才能像这样操纵它：

<p><a href="name/Nuno">Nuno</a></p>
<p><a href="name/Eimes">Eimes</a></p>

我试过了：

var name=$(this).text();
$( "p" ).each(function() {
  $(this).prepend('<a href="id/'+ $(this).text() +'"> ');
$(this).append("</a>");
});

但结果是：

<p><a href="id/Nuno"> </a>Nuno</p>
<p><a href="id/Eimes"> </a>Eimes</p>

如果我更改为<a>，$('p').text();也不在name内。它没有显示出价值。

Answer 1

$( "p" ).each(function() {
   var text = $(this).text();
   $(this).wrapInner('<a href="name/'+text+'"></a>');
 });

Live Demo

Answer 2

简单且.wrapInner()

$('p').wrapInner(function(){
    return '<a href="name/' + $(this).text() + '" />' // even this.innerHTML instead of $(this).text() will do
})

演示：Fiddle

Answer 3

一旦你提取了名字，我就会再次在<p></p>标签中重写整个代码：

var name=$(this).text();
$( "p" ).each(function() {
  $(this).html('<a href="name/'+ $(this).text() +'">' + $(this).text() + '</a>');
});

Answer 4

您只需要抓取内部内容，然后使用新HTML替换标记中的所有内容：

var name=$(this).text();
$( "p" ).each(function() {
    old = $(this).html();
    $(this).html('<a href="id/'+ old +'">'+old+'</a>');
});

Fiddle

Answer 5

Demo

$('p').html(function () {
    return '<a href="name/' + this.innerHTML + '">' + this.innerHTML + '</a>';
});

.html()