$("#confirm_text").text("Are you sure you want " +this.name +" "+ this.type +"?");
The whole phrase is white, but I want to make this.name and this.type orange. JS method fontcolor doesn't work. Any way to do this?
Try this :
"Are you sure you want <span style='color: orange'>" +this.name +" "+ this.type +"</span> ?"
Here you can see demo : http://jsfiddle.net/2pRzX/
this may work.
"Are you sure you want " +<span class="orange">this.name</span> +" "+ <span class="orange">this.type</span> +"?"
and apply css:
.orange{
color:orange;
}
SyntaxError: Unexpected token <.You have to put the text in some kind of HTML element, like <span>. Either you do it with innerHTML, which is the simpler method, or by creating the elements one by one.
As the question was updated, I updated my answer to fit the new question.
Instead of .text, you can use the .html method which works like element.innerHTML = (see below in the old answer). It parses HTML code and inserts it into the element. Note that you should enclose the string in single quotes so that you can use double quotes without escaping them.
$("#confirm_text").html('Are you sure you want <span style="color:orange">' + this.name + ' ' + this.type + '?');
This answer is outdated because the question has changed and jQuery rather than plain JS is required. I leave this here for later reference.
When you add HTML code to an existing element in the DOM, the browser will parse the string and create new elements. You can include the <span> tag in the string and the browser will create an element.
var targetDIV = document.getElementById("targetDIV");
// Add the text with innerHTML
targetDIV.innerHTML = 'Are you sure you want <span style="color:orange;">' + this.name + ' ' + this.type + '</span>?';
Sometimes you can't just use innerHTML, especially if there is already text in the target element. This is an alternative:
var targetDIV = document.getElementById("targetDIV");
// Append the first peace of text
targetDIV.appendChild(document.createTextNode("Are you sure you want "));
// Create the span element
var orange = document.createElement("span");
// Change its text-color
orange.style.color = "orange";
// Add the text to the span
orange.appendChild(document.createTextNode(this.name + " " + this.type));
// Append the span to the target element
targetDIV.appendChild(orange);
// Append the question mark
targetDIV.appendChild("?");
In most cases, you can use either of these methods. I always use the second one, though, because I have the feeling that it is the "cleaner" one. You have more control over what happens, you can change things by adding/removing/changing lines instead of modifying a large string. You also don't have to check whether your HTML is valid. But as I said, both methods work.
You can add <span> </span> tags around the name and type values, and add an colour using CSS.
Example:
http://jsfiddle.net/BAhUG/
this.nameandthis.typein spans with required classes.jQueryorJavaScript? for example set thecolor: red;toDOMelement?