Find and list all URL-s as clickable links to the bottom of the page

Question

I'm trying to write a javascript what is searching for all of the links on the page, then it is adding them to the bottom, under the original content.

"Document.links" seems to do the finding part, it is also listing them, but they are not clickable. So I tried to add some html codes (startHref and endHref lines), which broke the whole thing of course.

My (non-working) script:

var links = document.links;
for(var i = 0; i < links.length; i++) {
  var preLink = document.createTextNode("LINK: ");
  var linkHref = document.createTextNode(links[i].href);
  var lineBreak = document.createElement("br");
  var startHref = document.createElement("a href="");
  var endHref = document.createElement(""");

  document.body.appendChild(preLink);
  document.body.appendChild(startHref);
  document.body.appendChild(linkHref);
  document.body.appendChild(endHref);
  document.body.appendChild(lineBreak);
}

If this will work I'd also like to have them listed with a number in front of each line (starting with 1 - could be set in the preLink part) - if not too hard to implement.

Also, is there a way to list not all of the links, but only those matching with something? Like only links with a specific domain. Thank you!

Answer 1

As you have already found out, you can get all links in a document with:

var links = document.links;

Now you have an HTMLCollection. You can iterate through it and display all links. For better layout you can put them in a paragraph ( p ). This would be the loop:

for (var i = 0; i < links.length; i++) {
    var p = document.createElement("p");
    p.appendChild(links[i]);
    document.body.appendChild(p);
}

Now all links are appended at the end of the page, every link is on its own line and they are clickable. Please try this out.

EDIT: as of your comment, if I understand it right, you have just to put one additional line:

for (var i = 0; i < links.length; i++) {
    var p = document.createElement("p");

    // the following line is added
    links[i].innerHTML = links[i].href;

    p.appendChild(links[i]);
    document.body.appendChild(p);
}

That line will simply replace the inner HTML of the link with its value for the attribute href .

EDIT:

The variable links just points to document.links . The existing links are therefore removed from their original position and appended to the end. If you try to create new links in the for loop, like document.createElement("a") you will create an endless loop, because you're iterating through all links in the document. You remember, the variable links is not a snapshot of document.links when created, but points to it.

You can work around this with creating an array:

var links = [];
// populate the array links
for (var j = 0; j < document.links.length; j++) {
    links.push(document.links[j].cloneNode());
}

Now this is a snapshot of all links on the page. Every links is cloned and pushed to the array. Now run the for loop and the original links aren't removed.

If the original link was something like:

<a href="http://example.com" id="example" class="example-class" title="click me">This is an example.</a>

it will become:

<a href="http://example.com" id="example" class="example-class" title="click me">http://example.com</a>

But if you want just:

<a href="http://example.com">http://example.com</a>

then you have to adapt the code:

for (var i = 0; i < links.length; i++) {
    var p = document.createElement("p");
    
    
     // you can use text instead of innerHTML
    p.appendChild();
    document.body.appendChild(p);
}
  

If you want to style the output you can add classes like this:

p.classList.add("my-css-class");

I hope this helps you to achieve your goal.