Formatting URLs from array as links

Question

I'm attempting to pull some URLs from an array and write them to the page as <a> HTML elements.

As you can see in the jsfiddle below, for some reason the href is being set as [object text] and the URLs are being added as the link text, which means they don't work. How can I make it such that the href is the URL from my array and the link text is either the URL as well, or something like 'click here'?

Code

    var title = document.createTextNode(titles[i]),
    author = document.createTextNode(authors[i]),
    url = document.createTextNode(urls[i]),
    titleX = document.createElement('h1'),
    authorX = document.createElement('h2'),
    urlX = document.createElement('a');
    urlX.setAttribute('href', url);

jsfiddle

urlX.setAttribute('href', urls[i]); You missed that url is a TextNode object. — Alexander Manekovskiy
– Alexander Manekovskiy, Commented May 1, 2015 at 11:44
U need to get the content of text node by accessing the textContent property. e.g. urlX.setAttribute('href', url.textContent); — Balaji Viswanath
– Balaji Viswanath, Commented May 1, 2015 at 12:10
How do I change the link text to something else like 'click here'? — tmnsnmt
– tmnsnmt, Commented May 1, 2015 at 12:34

Alaeddin Hussein · Accepted Answer · 2015-05-01 12:29:07Z

1

Use urlX.setAttribute('href', url.textContent);

answered May 1, 2015 at 12:29

Alaeddin Hussein

7861 gold badge7 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JosiahDaniels · Accepted Answer · 2015-05-01 14:01:01Z

0

The reason the url is being set to [object Text] is that setAttribute converts the value to a string. In your code url is a textNode, which when converted to a string is serialized as, well, '[object Text]';

> String(document.createTextNode('testing'))
"[object Text]"

There really isn't any need to create a textNode for the url:

var urlX = document.createElement('a');
urlX.setAttribute('href', urls[i]);
urlX.appendChild(document.createTextNode('Click here'));

answered May 1, 2015 at 14:01

JosiahDaniels

2,57022 silver badges40 bronze badges

2 Comments

tmnsnmt Over a year ago

But then I get a link that looks like this: <a href="google.com">Click herehttp://www.google.com</a>

JosiahDaniels Over a year ago

Hmm.. Could you provide a fiddle (jsfiddle.net)?

Collectives™ on Stack Overflow

Formatting URLs from array as links

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related