Proper mechanism to add elements using jQuery

Question

I'm using jQuery to add elements dynamically to a dropdown but I think I'm mixing syntaxes and would like to go pure jQuery. Currently I'm doing this:

$("#data-source-menu").addClass("menu-container") .html($("<ul class=\"popup-menu\" id=\"dataset-menu\"><\/ul>"));

Then later

$("#dataset-menu").append($("<div>" + dataset.label + "<\/div>").addClass("menu-item").attr(dataset));

It's that inner building of the html I don't like. Is there a more abstract way to approach this that doesn't involve writing html? Something like JavaScript's document.createTextNode("Hello")?

Darin Dimitrov · Accepted Answer · 2011-02-13 21:59:51Z

3

That should be better:

$('#data-source-menu').addClass('menu-container').html(
    $('<ul/>').addClass('popup-menu').attr('id', 'dataset-menu').append(
        $('<div/>').text(dataset.label).addClass('menu-item')
    )
);

and here's the live demo.

answered Feb 13, 2011 at 21:59

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

1 Comment

Brad Christie Over a year ago

+1, This should be classified the "proper" way, as it's compartmentalizing functionality and avoiding any kind of intervening (albeit script variables, cookie values, etc.)

Collectives™ on Stack Overflow

Proper mechanism to add elements using jQuery

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related