Question

this is the piece of code that I am using in a loop to append an HTML element to a Google Chrome Extension’s popup(.html):

• ‘wordlist‘ is an array of words.
• ‘rand‘ is the Random number generating function.

Code:

for (l=1; l<11; l++) { 
    var i = rand(wordlist.length;
    var h1 = document.createElement("h1");  
    h1.innerHTML = wordlist[i];
    document.body.appendChild(h1);
}

There are no pre-existing HTML elements. So, this code is appending 10 random words to a blank page.

Now, instead of the words being appended to the page, I want to append links to the page (eg: http://dictionary.reference.com/browse/**wordlist[i]**, which is basically a dictionary.com query for that particular word). Also, I want this link to be opened in a new Chrome tab when clicked. How do I do this?

P.S: I started learning HTML and JS a day before, and I was too excited to start writing some code. I apologize if I have overlooked a simple Google solution to my problem. Thank you for your time.

Answer 1

Well its as easy as changing

 h1.innerHTML = wordlist[i];

to exatly what you are after, namely:

 h1.innerHTML = "<a href='http://dictionary.reference.com/browse/"+wordlist[i]+"' target='_blank'>"+wordlist[i]+"</a>";

To make it open in a new tab you have to add the attribute “target” and give it a value of blank. I think its deprecated in HTML 5 though…