Replace full html anchor with another html anchor using jQuery

Question

I have an anchor tag

<a class="contextMenuInnerItem hrefLockProposal" onclick="" href="javascript:void(0)">Locking</a>

I have to replace this anchor tag with following

var TempHtml= "<a class='contextMenuInnerItem' onclick='LockProposal(" + PKProposalId + ", 1)' href='javascript:void(0)'>Lock</a>"

I did this

htmlString=htmlString.replace("<a class='contextMenuInnerItem hrefLockProposal' onclick='' href='javascript:void(0)'>Locking</a>",TempHtml);

The htmlString is containing a very large amount of string which is coming from the database.

This is my htmlString which is coming from the database

<div><ul class="pmenubar"><li><div class="trigger" style="color:gray;border-right:0px; font-size:12px;" onclick=""></div><ul class="contextMenuInner"><li><a class="contextMenuInnerItem" onclick="RedirectPage(ProposalId,11,1);" href="javascript:void(0)">Settings</a></li><li><a class="contextMenuInnerItem" onclick="RedirectPage(ProposalId,23,1);" href="javascript:void(0)">Details</a></li><li><a class="contextMenuInnerItem" onclick="RedirectPage(ProposalId,17,1);" href="javascript:void(0)">Add Products</a></li><li><a class="contextMenuInnerItem" onclick="RedirectPage(ProposalId,18,1);" href="javascript:void(0)">QuickSpec</a></li><li><a class="contextMenuInnerItem hrefReportProposal" onclick="RedirectPage(ProposalId,19,1);" href="javascript:void(0)">Print Setup</a></li><li><a class="contextMenuInnerItem hrefReportProposal" onclick="RedirectPage(ProposalId,44,2);" href="javascript:void(0)">Print</a></li><li><a class="contextMenuInnerItem hrefExportProposal" onclick="RedirectPage(ProposalId,22,0);" href="javascript:void(0)">Export</a></li><li><a class="contextMenuInnerItem hrefCopyProposal" onclick="RedirectPage(ProposalId,24,1);" href="javascript:void(0)">Duplicate</a></li><li><a class="contextMenuInnerItem hrefReportProposal" onclick="RedirectPage(ProposalId,45,1);" href="javascript:void(0)">Preview</a></li><li><a class="contextMenuInnerItem" onclick="RedirectPage(ProposalId,52,1);" href="javascript:void(0)">Print Setup (Beta)</a></li><li><a class="contextMenuInnerItem" onclick="RedirectPage(ProposalId,53,1);" href="javascript:void(0)">QuickSpec(Old)</a></li><li><a class="contextMenuInnerItem" onclick="RedirectPage(ProposalId,43,1);" href="javascript:void(0)">Add Products(Old)</a></li><li><a class="contextMenuInnerItem" onclick="RedirectPage(ProposalId,49,1);" href="javascript:void(0)">Details(Old)</a></li><li><a class="contextMenuInnerItem hrefDeleteProposal" onclick="RemoveProposal(ProposalId)" href="javascript:void(0)">Remove</a></li><li id="ancLockProposal">**<a class="contextMenuInnerItem hrefLockProposal" onclick="" href="javascript:void(0)">Locking</a>**</li></ul></li></ul></div>

As you can see the last anchor tag in htmlString is the same I want to replace.How to achieve this?Kindly help.

@MichalLeszczyk Yes they are strings only.I corrected the code now. — Tushar Raj, Jul 18 '14 at 10:22
In your `htmlString` you're using quotes, and in your TempHtml you're using apostrophes for attributes values. — Michal Leszczyk, Jul 18 '14 at 10:22
@Arjuna It's giving me the same htmlString with no replacement.But if I replace any element like "li" with TempHtml or any anchor tag text like "Lock" with TempHtml,then it goes fine and replaces the content.But the same is not happening for what i want. — Tushar Raj, Jul 18 '14 at 10:24
check [this](http://stackoverflow.com/questions/1144783/replacing-all-occurrences-of-a-string-in-javascript) to replace all occurences — nraina, Jul 18 '14 at 10:25
@Arjuna I did this in console htmlString=htmlString.replace(/Locking<\/a>/g,TempHtml); But still it is showing me the same htmlString . :P — Tushar Raj, Jul 18 '14 at 10:35

Amitava Karan · Accepted Answer · 2014-07-18T11:09:10.863

1

the last li element, that contains the anchor tag you want to replace, first empty that and then appens the anchor tag you want to add.

$("#ancLockProposal").empty();
$("$ancLockProposal").append("<a class='contextMenuInnerItem' 
   onclick='LockProposal(" + PKProposalId + ", 1)' href='javascript:void(0)'>Lock</a>");

hope this helps.

edited Jul 18 '14 at 11:09

answered Jul 18 '14 at 11:04

Amitava Karan

637
1
5
20

score 0 · Answer 2 · answered Jul 18 '14 at 10:23

0

you need to make the following change:

htmlString=htmlString.replace(/<a class='contextMenuInnerItem hrefLockProposal' onclick='' href='javascript:void(0)'>Locking<\/a>/g,TempHtml);

answered Jul 18 '14 at 10:23

Amin Jafari

7,157
2
18
43

No this is not working for me still.I checked in console and found out the same htmlString value. :P – Tushar Raj Jul 18 '14 at 10:36
I got the solution . Instead of replacing the part of a string coming from the database ,we can first empty the "li" under which the replaceable "a" is present. I did this :- $("#ancLockProposal").empty(); //empty the parent "li" of replaceable "a" tag. $("#ancLockProposal").append(TempHtml);//After emptying , append the string by which you have to replace .Here it is TempHtml. – Tushar Raj Jul 18 '14 at 11:01
if that works for you, then post your answer to this question and mark it as the accepted answer! ;) – Amin Jafari Jul 18 '14 at 11:06

score 0 · Answer 3 · answered Jul 18 '14 at 11:12

I'd not use replace. Since you flagged this as jquery:

$('#ancLocProposal').next('a').text('Lock').click( function(){ LockProposal(PKProposalId, 1); } );

Possibly you'll need to use a closure, depending on scope/usage of PKProposalId:

(function(PKProposalId){$('#ancLocProposal').next('a').text('Lock').click( function(){ LockProposal(PKProposalId, 1); } );})(PKProposalId);

.. or you work with data-attributes.

score 0 · Answer 4 · answered Jul 18 '14 at 11:44

Try this, it get last anchor tag object in your div tag

var totalACount= $('div a').length-1;
var lastAncher = $('div a:eq('+totalACount+')'); 
alert($(lastAncher).attr("href"));

you can access class,id,onclick any thing you want, if attribute is exist in anchor tag. after accessing object you can replace object.

Replace full html anchor with another html anchor using jQuery

4 Answers4