CODEWITHSUNDEEP
javascriptjqueryhtmlreplacehref
David Rook
David Rook

Reputation: 33

replace href text in HTML using Javascript

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>

Upvotes: 3

Views: 1302

Answers (3)

Marcos Casagrande
Marcos Casagrande

Reputation: 40444

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>

Upvotes: 3

random_user_name
random_user_name

Reputation: 26180

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>

Upvotes: 2

Jobelle
Jobelle

Reputation: 2834

<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>

Upvotes: 0

Related Questions