How to add element in element using jquery

Question

I have some code like this:

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

How can I manipulate it like this:

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

I've tried:

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

but it results:

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

the <a> is not inside $('p').text(); also if i change to name. it didn't show the value.

What's this in var name=$(this).text();? What's the scope? — elclanrs
– elclanrs, Commented Sep 14, 2013 at 5:07

Dipesh Parmar · Accepted Answer · 2013-09-14 05:24:54Z

2

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

Live Demo

edited Sep 14, 2013 at 5:24

answered Sep 14, 2013 at 5:10

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dipesh Parmar Over a year ago

@MattBall what do you mean..?

Arun P Johny Over a year ago

@DipeshParmar nobody knows you are going to edit it... so when a person sees an answer they judge by what they see at that time...

Arun P Johny · Accepted Answer · 2013-09-14 05:10:50Z

0

Simple and .wrapInner()

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

Demo: Fiddle

answered Sep 14, 2013 at 5:10

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Max Hartshorn · Accepted Answer · 2013-09-14 05:11:05Z

0

Once you've extracted the name, I would just rewrite the whole code within the <p></p> tags again:

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

answered Sep 14, 2013 at 5:11

Max Hartshorn

7297 silver badges21 bronze badges

Comments

SpaceDog · Accepted Answer · 2013-09-14 05:11:26Z

0

You just need to grab the inner stuff, then replace everything in the tag with the new HTML:

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

Fiddle

answered Sep 14, 2013 at 5:11

SpaceDog

3,2791 gold badge20 silver badges27 bronze badges

Comments

Tushar Gupta - curioustushar · Accepted Answer · 2013-09-14 05:12:49Z

0

Demo

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

.html()

answered Sep 14, 2013 at 5:12

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Collectives™ on Stack Overflow

How to add element in element using jquery

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related