Adding HTML code inside JavaScript variable?

Question

I was simply wondering how I would add html code inside a javascript variable? For example, I want to use HTML code (a <a href="/example.html"> link piece of code) in one of the message lines:

var messages = [
"Please wait while we handle your request...",
"This is taking longer than usual to process - please wait...",
"We seem to be having trouble - please click here to contact support"
];
$.each(messages, function(index, message) {
setTimeout(function() {
 $('#wrapper').append(
 $('<p />', {text : message})
 )
}, index * 1500); // 1.5 seconds, add a zero for 15 seconds
});

So it would be like:

var messages = [
"Please wait while we handle your request...",
"This is taking longer than usual to process - please wait...",
"We seem to be having trouble - please click <a href="/help.html">here</a> to contact support"`

Is there a way of doing this?

• elclanrs: Yes, it is possible, you just need to fix the quotes, and use html instead of text.

Answer 1

Of course, you have to:

1. Fix the quotes (") in the string escaping them (\").
2. Use html: instead of text:.

---

First, edit your messages variable like this:

var messages = [
 "Please wait while we handle your request...",
 "This is taking longer than usual to process - please wait...",
 "We seem to be having trouble - please click <a href=\"/help.html\">here</a> to contact support"
];

Then edit your code to create the <p> element like this:

 $('<p />', {html : message});