How to use DOM methods to create and insert an anchor

Pav1977 · Nov 12, 2007

I believe I need to use DOM methods to create and insert an anchor object into a document. And I'm not sure how to do it.

I'm trying to write a script that will pass the url of the current page to the 'stumbleupon' site to be bookmarked.
My script is:

<script type="text/javascript">
function getHost()
{
var url = window.location.href;
var bookmarkpart1='<a href="

http://www.stumbleupon.com/submit?url="'

document.write(bookmarkpart1+url+'"> <img border=0 src=""**LINK TO stumbleit.gif**"" alt="StumbleUpon Toolbar"> Stumble It!</a>')
}
</script>

<script type="text/javascript">
getHost();
</script>

Unfortunately it's for some reason not writing the value of the variables (bookmarkpart1 and url but writes them as string on the page.
What am I doing wrong???

if I call it with for example

<body onload="getHost()">
</body>

it works fine but that's not how I want it.

Any help would be much appreciated.

Pav

BillyRayPreachersSon · Nov 12, 2007

If you call "document.write" after the page has loaded, it will replace the contents of the page.

You want something like:

Code:

var baseUrl = '[URL unfurl="true"]http://www.stumbleupon.com/submit?url=';[/URL]

var anchor = document.createElement('a');
anchor.href = baseUrl + window.location.href;

var img = document.createElement('img');
img.border = '0';
img.src = 'stumbleit.gif';
img.alt = 'StumbleUpon Toolbar';
anchor.appendChild(img);

var linkText = document.createTextNode('Stumble It!');
anchor.appendChild(linkText);

document.getElementsByTagName('body')[0].appendChild(anchor);

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

BillyRayPreachersSon · Nov 15, 2007

Pav,

Did that help? Did you resolve your problem?

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to use DOM methods to create and insert an anchor

Pav1977

IS-IT--Management

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor