<p>There are times when I have to implement designs that have print links on them. While I may think they are useless, I still have to make them work as they are a part of an approved comp. Sure, it is easy to have a link and then add an onclick event to launch the print window, but is that the right thing to do?</p>

<p>Clicking a JavaScript print link does nothing more than launch the browser’s print window. If a person has JavaScript disabled, nothing will happen when they click a link like this:</p>
<div class="codeblock"><code>
&lt;a href="#" onclick="window.print(); return false;"&gt;Print&lt;/a&gt; 

</code></div>

<p>Ideally, we do not want to have things on a page that do not work without JavaScript enabled. So the solution is to write the print link into the DOM using JavaScript, then attach a click event to the link. Luckily, I use jQuery on every project, so it makes the process much easier.</p>

<h2>The Solution</h2>
<p>In this example, we are going to prepend a list item with a link to an unordered list with the id of <strong>tools</strong>. Then, we attach a click event to the link we have just added to the DOM. Finally, we <strong>return false</strong> to override the action of the link.</p>

<p><strong>Here is the script:</strong></p>
<div class="codeblock"><code>
$(document).ready(function() {<br /> $('ul#tools').prepend('&lt;li class="print"&gt;&lt;a href="#print"&gt;Click me to print&lt;/a&gt;&lt;/li&gt;');<br /> $('ul#tools li.print a').click(function() {<br />  window.print();<br />  return false;<br /> });<br />}); 

</code></div>

<p>Take a look at the <a href="//trevor-davis.com/play/javascript-print-link/">demo page</a> to see it in action. The script is nothing complex; it is just another example of using jQuery to improve a user’s experience.</p>