How to append a string variable in Jquery html elememt attribute

Question

Please , I have a JQuery code when appends data to a div element sucessfully like this

 $('#conversation').append('<div id="receiver"><p><b>' + username + ':</b> ' + data + '</p></div><br>');

Now supposing I want to have an anchor tag which will have a hyperlink inside as an atrribute and I want to pass a variable to that href attribute not the link itself since I don't know the kind of link that will be sent. I have problems tring to append this.

 $('#conversation').append('<div id="receiver"><p><b>' + username + ': <a id="link" href="'+ data +"></a></p></div><br>');

This does not work. Any idea how to go about this. This is my whole code snippet

socket.on('updatechat', function (username, data) {
//showing username and the message sent
var checkifdataisalink=data;
var check=checkifdataisalink.split('://')
if((check[0]=='http')||(check=='https'))
{
    $('#conversation').append('<div id="receiver"><p><b>' + username + ': <a id="link" href="'+ data +"></a></p></div><br>');
}else{
$('#conversation').append('<div id="receiver"><p><b>' + username + ':</b> ' + data + '</p></div><br>');
}

});

lshettyl · Accepted Answer · 2015-03-21 21:57:32Z

1

Apart from the missing quote, your or part of the if condition was missing [0]. See below.

//For demo purposes only
var check = ["http", "other-part-of-the-url"];
var username = "user";
var data = "data";
// --;--

if(check[0] == 'http' || check[0] == 'https') {
    $('#conversation').append('<div id="receiver"><p><strong>' + username + ':</strong> <a id="link" href="' + data + '">' + data + '</a></p></div><br/>');
} else {
    $('#conversation').append('<div id="receiver"><p><strong>' + username + ':</strong>' + data + '</p></div><br/>');
}

Demo@fiddle

answered Mar 21, 2015 at 21:57

lshettyl

8,1815 gold badges27 silver badges31 bronze badges

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

3 Comments

Kwaadjei Over a year ago

Perfect. Just working very well. Thank you so much. I am most grateful

Kwaadjei Over a year ago

can you please explain how to go about situations like this. Sorry to bother you.

lshettyl Over a year ago

Every situation is different. Paying close attention to what you do would be helpful. Please accept/upvote this answer if it helped you.

hamed · Accepted Answer · 2015-03-21 21:48:24Z

1

Change

$('#conversation').append('<div id="receiver"><p><b>' + username + ': <a id="link" href="'+ data +"></a></p></div><br>')

into:

$('#conversation').append('<div id="receiver"><p><b>' + username + ': <a id="link" href="'+ data +'"></a></p></div><br>');

Just one ' was missing after data

edited Mar 21, 2015 at 21:48

answered Mar 21, 2015 at 21:43

hamed

8,04517 gold badges66 silver badges119 bronze badges

3 Comments

Yass Over a year ago

You should explain the change you made (which was replacing the double quote with a single on the final string block)

Kwaadjei Over a year ago

the moment i do this "'+ data +'" the whole code becomes invalid. this side ': <a id="link" href="'+ data +'"> if it is correct should have the a id turn blue, the href as well but the whole ': <a id="link" href="'+ data +'"> turns green and it indicates a syntax error

Yass Over a year ago

It shouldn't do if all of the quotes (double and single) have a matching start and end.

Collectives™ on Stack Overflow

How to append a string variable in Jquery html elememt attribute

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related