Create Element in Jquery

Question

I would like to create element in Jquery/Javascript by using "div.someelement" like this

var SomeElement = $("div.someelement");
$( "#container" ).append( SomeElement );

But I don't want to copy element with the same class, I would like to create new one.

document.createElement is creating "<div.somelement>" instead of <div class="someelement">

Answer 1

I would use the following method to create elements on the fly

$("<div/>",{
    "class" : "someelement",
    // .. you can go on and add properties
    "css" : {
        "color" : "red"
    },
    "click" : function(){
        alert("you just clicked me!!");
    },
    "data" : {
       "foo" : "bar"
    }
}).appendTo("#container");

Answer 2

Try this:

var $someelement = $('<div class="someelement"/>').appendTo('#container');

This will create a brand new element inside of #container and save it as $someelement for easy reference later.

http://api.jquery.com/jQuery/#jQuery2

UPDATE

You could clone the original then empty it out. This doesn't affect the original element at all.

var $someelement = $('div.someelement').clone().empty().appendTo('#container');

Answer 3

You can do this by the following:

var newElement = $('<div class="someelement"></div>');
$('#container').append(newElement);

or if you don't need the element you can directly append it:

$('#container').append('<div class="someelement"></div>');