jQuery: how to add HTML to dynamically created div

Question

I am using the below function to create a div dynamically which works fine so far.

How can I add HTML to this div where I am saying "text: userName" ? Specifically I would like to add a Bootstrap icon ( <i class="icon-sign-blank"></i> ) in front of the userName but when I try this is just adds the HTML as text instead of formatting it as an icon. (Bootstrap is installed correctly.)

function addUser() 
{
var userName = $('#userName').val();
var userElementId = getId(userName);

$('<div/>', {
    text: userName,
    id: userElementId,
    onmouseover: "function1('" + userName + "', this)",
    onmouseout: "function2()",
}).addClass('user').appendTo('#parentDiv');

if (nameCtrl) {
    nameCtrl.GetStatus(userName, 'users');
}

$('#userName').val('');
}

Many thanks for any help with this, Tim

Answer 1

Change text: to html: and add the icon before username.

$('<div/>', {
    html: '<i class="icon-sign-blank"></i> '+userName,
    id: userElementId,
    onmouseover: "function1('" + userName + "', this)",
    onmouseout: "function2()",
}).addClass('user').appendTo('#parentDiv');

Answer 2

You are setting the text: attribte. Try setting the html: attribute with the html you want.

Answer 3

try something like this

var div = '<div><i class="icon-sign-blank"></i>'+userName+'</div>';
$(div, {
    id: userElementId,
    onmouseover: "function1('" + userName + "', this)",
    onmouseout: "function2()",
}).addClass('user').appendTo('#parentDiv');