Assuming that the html contains the following structure:

<div>
    <a href="http://the/link/that/needs/to/be/changed">text</a>
</div>

<div>
    <div>
        //<script> or <style> must go here
    </div>
</div>

...and assuming that the 'contribution' to the final HTML file can be inserted ONLY at the specified location, and assuming that the markup for the "a" element cannot be modified in any way, is it possible to add javascript or css code that will change the url that the href attribute of the previous "a" element refers to? If so, how?

Assuming that the html contains the following structure:

<div>
    <a href="http://the/link/that/needs/to/be/changed">text</a>
</div>

<div>
    <div>
        //<script> or <style> must go here
    </div>
</div>

...and assuming that the 'contribution' to the final HTML file can be inserted ONLY at the specified location, and assuming that the markup for the "a" element cannot be modified in any way, is it possible to add javascript or css code that will change the url that the href attribute of the previous "a" element refers to? If so, how?

• javascript
• html
• css
• hyperlink
• styles

• 1 See stackoverflow./questions/179713/… – ForOhFor Commented Jun 17, 2013 at 19:21
• If you want to get the previous a element and cannot change the HTML, this should do: var elements = document.getElementsByTagName('a'); var last = elements[elements.length - 1];. – Felix Kling Commented Jun 17, 2013 at 19:22

4 Answers 4

You could do it without id:

document.querySelector("a[href^='http://the']")

and set the href prop:

document.querySelector("a[href^='http://the']").href=whatever

For a full reference (browser-patibility) of querySelector see the MDN-Article

Put an id on it, e.g.

<a id="the_a_tag" href="...">...</a>
   ^^^^^^^^^^^^^^

then the JS is simply

document.getElementById('the_a_tag').href = 'new address goes here';

as long as you put the javascript AFTER the relevant HTML.

And note: CSS is for presentation only. With a few exceptions, it cannot affect the content of document elements, merely how they appear (color/size/position/etc...).

Give the link an id <a href='...' id='linkToChange'>text</a>

And then access it in your script: document.getElementById('linkToChange').href='newAddress';

You can do this using something like this:

document.getElementById("abc").href="xyz.php";

You will need to set an ID for the tag, so your tag will look like this:

    <div>
    <a href="http://the/link/that/needs/to/be/changed">text</a>
</div>

<div>
    <div>
        //<script> or <style> must go here
    </div>
</div>