How to append text to div

Question

Hi i have written this code to take 3 parameters and assign to variable.now i want to append the text i am getting throughparameter to div fontdiv how to do this?

here is what i have tried..

function getTextWidth(text, fontname, fontsize) {
    var elem = '<div id="fontdiv" style="position: absolute;visibility: visible;height: auto;"></div>';
    $('body').append($(elem));
    var fontdiv = document.getElementById('fontdiv');
    fontdiv.style.fontSize = fontsize;
    fontdiv.style.fontFamily = fontname;
    $("#fontdiv").html($('text').val());
    return fontdiv.clientWidth;
};

Answer 1

如果您的text参数已经有文字

$("#fontdiv").append(text);    // append text into fontdiv

Answer 2

Replace

$('body').append($(elem));

with

$('body').append(elem);

Answer 3

Use

function getTextWidth(text, fontname, fontsize) {
    var elem = '<div id="fontdiv" style="position: absolute;visibility: visible;height: auto;"></div>';
    var el = $(elem).append(text);
    $('body').append(el);
    var fontdiv = document.getElementById('fontdiv');
    fontdiv.style.fontSize = fontsize;
    fontdiv.style.fontFamily = fontname;
    $("#fontdiv").html($('text').val());
    return fontdiv.clientWidth;
};

Another way could be

function getTextWidth(text, fontname, fontsize) {
    var el = $('<div>', {
        id: 'fontdiv'
    }).css({
        position: 'absolute',
        visibility: 'visible',
        height: 'auto',
        fontSize: fontsize,
        fontFamily: fontname
    }).append(text).appendTo('body');
    return el.get(0).clientWidth;
};

Answer 4

If the value of text is set already (and it seems to be), use :

$("#fontdiv").append(text);

And it should work.