a bit confused here. I have an array that's full of answers to questions and am having trouble getting the link to appear as.. an actual link. I've tried document.write but it's just breaking my page. Any ideas?

this.answer = [
    'answer1' + '<a href="URL">click here</a>',
    'answer 2', 
    'answer 3'
]

I have no idea how to write the <a href="URL">click here</a> bit to get it to not appear as just a string of text instead of HTML. Any ideas? My array is in a Shadow DOM custom HTML5 element, also. I know how to target the shadow DOM, just not sure of the basic format..

Thanks! - Shan

edit: Thanks for the response, mplungjan. Like this?

this.answer = [
    'answer1' + innerHTML('<a href="URL">click here</a>'),
    'answer 2', 
    'answer 3'
]

this makes the entire thing appear blank on my page, however.. Think I'm formatting it wrong

edit 2 okay trying to fix it based on the answers I got.. I tried this:

 var insertThis = document.getElementById('myElement').innerHTML = '<a href="#">Click here</a>';

 this.answer = [
    'answer1' + insertThis,
    'answer 2', 
    'answer 3'
]

but it's still making my array totally blank :( sorry I am pretty new to arrays it is very confusing to me.. Do i need to put the entirety of my first array item in the innerHTML including the 'answer1' bit?

edit it says that I cannot set innerHTML of null.. but when I console log my element right before I get the element by id it logs it fine.. hmm

a bit confused here. I have an array that's full of answers to questions and am having trouble getting the link to appear as.. an actual link. I've tried document.write but it's just breaking my page. Any ideas?

this.answer = [
    'answer1' + '<a href="URL">click here</a>',
    'answer 2', 
    'answer 3'
]

I have no idea how to write the <a href="URL">click here</a> bit to get it to not appear as just a string of text instead of HTML. Any ideas? My array is in a Shadow DOM custom HTML5 element, also. I know how to target the shadow DOM, just not sure of the basic format..

Thanks! - Shan

edit: Thanks for the response, mplungjan. Like this?

this.answer = [
    'answer1' + innerHTML('<a href="URL">click here</a>'),
    'answer 2', 
    'answer 3'
]

this makes the entire thing appear blank on my page, however.. Think I'm formatting it wrong

edit 2 okay trying to fix it based on the answers I got.. I tried this:

 var insertThis = document.getElementById('myElement').innerHTML = '<a href="#">Click here</a>';

 this.answer = [
    'answer1' + insertThis,
    'answer 2', 
    'answer 3'
]

but it's still making my array totally blank :( sorry I am pretty new to arrays it is very confusing to me.. Do i need to put the entirety of my first array item in the innerHTML including the 'answer1' bit?

edit it says that I cannot set innerHTML of null.. but when I console log my element right before I get the element by id it logs it fine.. hmm

• javascript

Share Improve this question Follow edited Oct 3, 2014 at 20:44 shan asked Oct 3, 2014 at 20:27 shanshan 3,16555 gold badges3737 silver badges5353 bronze badges 6

• You need to use innerHTML - show where you want to have the link appear – mplungjan Commented Oct 3, 2014 at 20:29
• You need to put the string into the innerHTML of some DOM element. That's when it gets parsed as HTML, and turned into a link. – Barmar Commented Oct 3, 2014 at 20:34
• innerHTML() isn't a function, aren't you getting an error when you try to call it? You have the JS console open when you're testing Javascript, don't you? – Barmar Commented Oct 3, 2014 at 20:35
• 2 You have to use something like document.getElementById('answer').innerHTML = this.answer[0]; – Barmar Commented Oct 3, 2014 at 20:36
• I added to my question, thank you for your responses – shan Commented Oct 3, 2014 at 20:44

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

Like the ments to your post, the text isn't being processed as HTML when you're putting it in the DOM of your page.

You need to set the innerHTML of your element to be a value of the array, like this:

    var answer = [
        'answer1' + '<a href="URL">click here</a>',
        'answer 2', 
        'answer 3'
    ];

    document.getElementById("yourelement").innerHTML = answer[0];

Try this,

var aColor = [
    '<a href="#red">red</a>',
    '<a href="#green">green</a>',
    '<a href="#blue">blue</a>'
];

var x = Math.floor(Math.random() % 3);

document.getElementById('elementId').innerHTML = aColor[x];

The array has three elements in it. Each element contains a string. Each string contains a representation of a link for an assorted color. The variable 'x' is a random address for the array, (0, 1, 2).