I'm making a card game so I've made this script but I don't know why it doesn't output the symbols as ♥, but rather only ♥ as a string, anyone knows why?

$(document).ready(function() {

function makeCard(kind) {
    var
        card = $('<div>', { class: 'card' }),
        color = (kind == 'hearts' || kind == 'diams') ? 'red' : 'black',
        upper = $('<div>', { class: 'upper card-symbol ' + color, text: '\&' + kind + '\;' }),
        lower = $('<div>', { class: 'lower card-symbol ' + color, text: '\&' + kind + '\;' });

    card.append(upper).append(lower);
    card.appendTo('body');
}

makeCard('hearts');

});

I'm making a card game so I've made this script but I don't know why it doesn't output the symbols as ♥, but rather only ♥ as a string, anyone knows why?

$(document).ready(function() {

function makeCard(kind) {
    var
        card = $('<div>', { class: 'card' }),
        color = (kind == 'hearts' || kind == 'diams') ? 'red' : 'black',
        upper = $('<div>', { class: 'upper card-symbol ' + color, text: '\&' + kind + '\;' }),
        lower = $('<div>', { class: 'lower card-symbol ' + color, text: '\&' + kind + '\;' });

    card.append(upper).append(lower);
    card.appendTo('body');
}

makeCard('hearts');

});

• javascript
• jquery
• special-characters

1 Answer 1

You want html, not text:

http://jsfiddle/cxNqK/2/

    upper = $('<div>', {
        'class': 'upper card-symbol ' + color,
        html: '\&' + kind + '\;'
    }),
    lower = $('<div>', {
        'class': 'lower card-symbol ' + color,
        html: '\&' + kind + '\;'
    });