3
\$\begingroup\$

I've got a lot of links (150+) in an href (here I can only post 2) and I want them to be opened in a new tab or window. I've got this piece of code that works, but before I add it to my website and before I add it to a lot of articles of mine (250+), I want to make sure the syntax of the code is 100% correct. Also, do I need the <p>?

<script> 
window.onload = function(){
    var a = document.getElementById('links').getElementsByTagName('a');
    for (var i=0; i<a.length; i++){
         a[i].setAttribute('target', '_blank');
    }
} 
</script>

<div id="links">
    <p><a href="http://www.google.com/" >test</a></p>
    <p><a href="http://www.google.com/" >test</a></p>
</div>
\$\endgroup\$

migrated from stackoverflow.com Nov 22 '16 at 2:21

This question came from our site for professional and enthusiast programmers.

  • 1
    \$\begingroup\$ Yes it will work, Just ensure your links put into the DIV with id is "links" \$\endgroup\$ – tuongpg.jz Nov 4 '16 at 3:05
  • \$\begingroup\$ it does not matter if you remove <p> tag. If u want to separate them to two lines, then keep it \$\endgroup\$ – Donald Wu Nov 4 '16 at 3:07
  • \$\begingroup\$ I do not think you need the <p> tags \$\endgroup\$ – Mister Positive Nov 4 '16 at 3:08
  • \$\begingroup\$ Putting a <p> tag on every link will put each link on a new paragraph. You could use a <br/> tag aswell \$\endgroup\$ – Lemuel Botha Nov 4 '16 at 3:08
  • 1
    \$\begingroup\$ I'd recommend you to use search and replace to add target="_blank" to your links in your source code (html/php files or in the DB) rather than using a client-side script (it adds to the load, some users might have JS disabled and in general it's not elegant). But if you have to do it this way, it's fine. <p>'s are not neccessary as others have said, but you also don't need to use them for the layout and neither you have to add <br> to separate them. You can use CSS #links a { display: block; } instead. \$\endgroup\$ – Dmitriy Gamolin Nov 4 '16 at 3:13
1
\$\begingroup\$

The code itself is fine, though I would flip it, first html, then the javascript (without the window.onload).

AN example to explain why: If you have a huge image and a slow connection the loading takes say 5 seconds. These 5 seconds all your anchors don't have the target="_blank" and if a user clicks they still leave your website.

I would not use this method meself (unless I have to) . If you use AJAX to load content with anchors, those anchors will not have the target="_blank" either. This will require a bit more advances problem solving. If you want some links to be ignored, you can't with the current code. There are more small problems that will pop up which are all to minor to sum up here, but in the end are all just very ennoying.

I recommend that you do not rely on this method. Just take some time and update the content. I assume you have that in a datase, just FIND() and REPLACE(). Make it permanent.

\$\endgroup\$
0
\$\begingroup\$

The syntax for the JavaScript code is fine. You don't need the <p> tag for every <a> element. If you remove <p>, it doesn't matter if you don't have a specific style CSS for your <p> tag. I don't know what you are using with the <a> tag. Remember, the <p> defines a paragraph.

W3Schools

\$\endgroup\$
-1
\$\begingroup\$

You can use querySelectorAll to loop through all of your elements:

document.addEventListener('DOMContentLoaded', function(e) {
    document.querySelectorAll('#links a').forEach(function(el, i) {
        el.setAttribute('target', '_blank');
    });
});
\$\endgroup\$
  • 1
    \$\begingroup\$ We are looking for answers that provide insightful observations about the code in the question. Answers that consist of independent solutions with no justification do not constitute a code review, and may be removed. \$\endgroup\$ – Stop ongoing harm to Monica Jun 21 '17 at 12:27
  • \$\begingroup\$ This will apply to all <a> elements, while the original question only applies to those under getElementById('links') \$\endgroup\$ – Simon Forsberg Jun 21 '17 at 14:39
  • \$\begingroup\$ added a small fix. \$\endgroup\$ – JohnD Jun 21 '17 at 14:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy