Adding an a href tag in Javascript

Question

I'm making a quiz based on this:

https://jsfiddle.net/thebobbyblack/xgf9k2hw/

And I can't figure out how to add links in the quiz's "correct" response string

Ideally it would be over parts of the text in the response to a correct answer, but I would also settle for a separate Text. line below the response on a questions answer.

For the latter, I've tried:

Question:

var quiz = [
{
             "question"      :   "Q1: How many locations in Syria does the UN classify as besieged?",
        "image"         :   "",
        "choices"       :   [
                                "Zero",
                                "One",
                                "Four",
                                "Nine"
                            ],
        "correct"       :   "Zero",
        "explanation"   :   "The UN used to classify nine locations and more than 417,000 people as living under siege, but all these places, including formerly rebel-held Eastern Ghouta, have now either been evacuated or retaken by the Syrian government.",
 "link" : "http://www.hamsterdance.com",
 }

~~But this code doesn't help:~~

if(quiz[currentquestion].hasOwnProperty('link') && quiz[currentquestion]['link'] != ""){
            if($('#question-image').length == 0){
                $(document.createElement('a'))
                    .addClass('question-image')
                    .attr('id', 'question-image')
                    .attr('src', quiz[currentquestion]['link'])
                    .attr('alt', htmlEncode(quiz[currentquestion]['question']))
                    .insertAfter('#question');
            } else {
                $('#question-image')
                    .attr('href', quiz[currentquestion]['link'])
                    .attr('alt', htmlEncode(quiz[currentquestion]['question']));
            }
        } else {
            $('#question-image').remove();
        }

I've found something that does work! Now I just can't figure out how to pass items from the array to be the destination URL. This code lets me select from the array to make the link text.

$('<a>').addClass('linktext').attr('id','link').html('').text(quiz[currentquestion]['link']).insertAfter('#explanation');

What should I search the jquery documentation for? Any help greatly appreciated.

BTW, instead of `$(document.createElement('a'))` you can just write `$('')`. And you can put all the attributes in an object argument: `$('', {"class": "question-image", id: "question-image", "href": quiz[currentquestion].question});` — Barmar, Dec 27 '18 at 18:15
You don't need to use HTML encoding when adding attributes in JavaScript. That's only needed when the attribute is in HTML source. — Barmar, Dec 27 '18 at 18:16

score 0 · Answer 1 · answered Dec 27 '18 at 20:48

Solved! Thank you for your help!

$('<a>').addClass('linktext').attr('id','linktext').attr('href',(quiz[currentquestion]['linkurl'])).html('').text(quiz[currentquestion]['link']).insertAfter('#explanation');

Adding "linkurl" to my array. Fiddle here and this stack exchange question really helped as well: How do I create a link using javascript?

Again, thanks

Adding an a href tag in Javascript

1 Answers1