replace href text in HTML using Javascript

Question

Is it possible to use Javascript to change the a href value in the following code from href="http://**store**.mystitexxx.co.nz" to href="http://**www**.mystitexxx.co.nz"? It needs to be specific to this DIV or image, ie not global

<div id="ctl00" class="hidden-xs">
   <h1 class="logo clearfix">
      <a href="http://store.mystorexxx.co.nz" title="My Store"><img class="img-responsive"src="/user/files/logo.png?t=1601271313" title="My Store" alt="My Store"/></a>
   </h1>
</div>

I suspect you're not asking the full question here. Do you want it to ALWAYS replace with EXACTLY that url? Or do you want it to "detect" if there's a www in the url already, and if not, add the www? — random_user_name
– random_user_name, Commented Jan 27, 2016 at 4:03
I always want to replace it with that exact url, but just fir the logo image, not elsewhere on the page — David Rook
– David Rook, Commented Jan 27, 2016 at 4:24

Marcos Casagrande · Accepted Answer · 2016-01-27 04:41:43Z

3

Since you need it to be specific to this exact link, just:

document.getElementById("link").href = "http://www.mystitexxx.co.nz";

<div id="ctl00" class="hidden-xs">
   <h1 class="logo clearfix">
      <a href="http://store.mystorexxx.co.nz" title="My Store" id="link"><img class="img-responsive"src="/user/files/logo.png?t=1601271313" title="My Store" alt="My Store"/></a>
   </h1>
</div>

With jQuery:

$("#link").attr("href", "http://www.mystitexxx.co.nz");

Edit: If you don't have control over the HTML to add an ID. (If you did, why would you want to change the href with Javascript? :P)

document.querySelector("h1.logo a").href = "http://www.mystorexxx.co.nz";
//$("h1.logo a").attr("href", "http://www.mystitexxx.co.nz");

<div id="ctl00" class="hidden-xs">
   <h1 class="logo clearfix">
      <a href="http://store.mystorexxx.co.nz" title="My Store"><img class="img-responsive"src="/user/files/logo.png?t=1601271313" title="My Store" alt="My Store"/></a>
   </h1>
</div>

edited Jan 27, 2016 at 4:41

answered Jan 27, 2016 at 4:04

Marcos Casagrande

40.7k11 gold badges93 silver badges107 bronze badges

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

3 Comments

David Rook Over a year ago

THank you, but unfortunately the img does not have an ID and I can't directly add one, is there a way to add it first using Javascript?

Marcos Casagrande Over a year ago

I thought it was you code, Ill edit it without using ID.

StevenDStanton Over a year ago

One thing to consider is will the HTML your working with match EXACTLY to what you have shown us as an example. If you have additional anchor points then the code will have to be modified to handle them. Some how the link you want to replace has to be uniquely identifiable either by an ID or by its place in the mark up. If you need multiple links change then the code will be entirely different.

random_user_name · Accepted Answer · 2016-01-27 04:33:33Z

2

Gee, it seems like all the other answers are pretty complicated.

It's simple:

jQuery('h1.logo a').attr('href', 'http://www.mystitexxx.co.nz');

Or, if you don't know where to put this / how to include it, then:

Between your <head> and </head> tags, add this:

<script>
    jQuery(function($) {
        $('h1.logo a').attr('href', 'http://www.mystitexxx.co.nz');
    }); 
</script>

And, if you don't already have jQuery loading, then just add it in like so (again, between <head> tags):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
    jQuery(function($) {
        $('h1.logo a').attr('href', 'http://www.mystitexxx.co.nz');
    }); 
</script>

answered Jan 27, 2016 at 4:33

random_user_name

26.3k7 gold badges81 silver badges119 bronze badges

Comments

Jobelle · Accepted Answer · 2016-01-27 04:07:09Z

0

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
    .selected{
        background-color : green;
    }
    </style>
<script>

    $(document).ready(function () {

        $('.logo a img.img-responsive').attr('src', "http://www.mystitexxx.co.nz")

    });
</script>
</head>
<body>
    <div id="ctl00" class="hidden-xs">
   <h1 class="logo clearfix">
      <a href="http://store.mystorexxx.co.nz" title="My Store"><img class="img-responsive"src="/user/files/logo.png?t=1601271313" title="My Store" alt="My Store"/></a>
   </h1>
</div>
</body>
</html>

answered Jan 27, 2016 at 4:07

Jobelle

2,8441 gold badge17 silver badges27 bronze badges

Collectives™ on Stack Overflow

replace href text in HTML using Javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related