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.

Answer 1

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.

Answer 2

Using a replace works:

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

DEMO