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

Thanks, that worked. I had tried it before but probably had a typo there. — user2571510
– user2571510, Commented Dec 12, 2013 at 12:47

TheCarver · Accepted Answer · 2013-12-12 12:47:17Z

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');

answered Dec 12, 2013 at 12:47

TheCarver

19.8k27 gold badges105 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SteveP · Accepted Answer · 2013-12-12 12:45:24Z

1

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

answered Dec 12, 2013 at 12:45

SteveP

19.2k9 gold badges49 silver badges62 bronze badges

Comments

rajesh kakawat · Accepted Answer · 2013-12-12 12:48:16Z

0

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');

answered Dec 12, 2013 at 12:48

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

Collectives™ on Stack Overflow

jQuery: how to add HTML to dynamically created div

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related