I would like to prepend "Download a PDF of " to any hyperlinks, linking to PDF files. Currently I'm able to prepend that exact text, but it prepends it to the hyperlink text. I would like it to reside outside of the hyperlink element, like so: Download a PDF of [hyperlink with text]
This is the code I'm using now:
jQuery('a[href$=.pdf]').prepend('Download a PDF of ');
Have you tried before?
jQuery('a[href$=.pdf]').before('Download a PDF of ');
You could wrap it up in an inline element (e.g. <span>) and insert it before the desired elements. Here's an SSCCE, just copy'n'paste'n'run it:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2172666</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('<span>Download a PDF of </span>').insertBefore('a[href$=.pdf]');
});
</script>
</head>
<body>
<p><a href="foo.pdf">foo.pdf</a></p>
<p><a href="foo.exe">foo.exe</a></p>
<p><a href="bar.pdf">bar.pdf</a></p>
</body>
</html>
Edit: ah, as answered before, the jQuery.before() works exactly the way you want, so I would go for it instead.
Here's an example that will do what you're looking for:
<a href="foo.pdf">Foo</a>
<a href="bar.pdf">Bar</a>
<span id='foo'>Download a pdf of </span>
<script type='text/javascript'>
$('#foo').insertBefore('a[href$=.pdf]');
</script>