Change Anchor Text while keeping the FontAwesome Icon inlined

Question

I am using WordPress so i could only change the HTML through custom JS.

This is the HTML

<li class="submit-listing"><a href="http://localhost/proficientlink/post-your-ad/"><i class="fa fa-plus"></i> Submit Listing</a></li>

I already tried all of these:

$(".submit-listing a").html("<i class="fa fa-plus"></i> Post You Ad");

$(".submit-listing a").html(function(){
$(this).find("i").addClass("fa fa-plus");
this.nodeValue = "Post Your Ad";
});

but none of these work. I also tried this : How can I get, manipulate and replace a text node using jQuery?, but nothing seems to work with me.

Thanks anyway.

Welcome to Stack Overflow. I'm glad you were able to get your issue resolved. Please see [What should I do when someone answers my question?](https://stackoverflow.com/help/someone-answers) and consider accepting one of the answers below so that the issue is marked as resolved on the site. — FluffyKitten, Aug 27 '17 at 15:11

score 0 · Answer 1 · answered Aug 27 '17 at 13:49

0

The first line of your code should be,

$(".submit-listing a").html("<i class='fa fa-plus'></i> Post You Ad");

Change the double quotes to single quotes because JavaScript treats them as closing strings.

answered Aug 27 '17 at 13:49

Nicholas

156
8

I'd actually have the quotes the other way around fwiw: `$('.submit-listing a').html(' Post You Ad');`. That way the HTML looks like HTML. – Andy Aug 27 '17 at 13:55
but i tried removing "" using single quote, it worked though.. unluckily i needed to keep the fontawesome icon. – crosse Aug 27 '17 at 13:56
I have copied/pasted your code and it worked! really dont know why (?.?) – crosse Aug 27 '17 at 14:01
Glad that I could help! – Nicholas Aug 27 '17 at 14:02

score 0 · Accepted Answer · answered Aug 27 '17 at 13:53

0

Using a replace works:

$('.submit-listing a').html(function (i, el) {
  return el.replace('Submit Listing', 'Post your ad');
});

DEMO

answered Aug 27 '17 at 13:53

Andy

61,948
13
68
95

1

Tried this! It worked as well :) Thanks again, Andy :) – crosse Aug 27 '17 at 14:05

Change Anchor Text while keeping the FontAwesome Icon inlined

2 Answers2