Create New HTML Elements With jQuery

With jQuery, it’s not so hard to create HTML elements. All that is needed is to use the dollar sign function $() to initialize the element. And from there, other options can be attached like adding a CSS class, attribute id, and text to name a few.

Requirements:

• jQuery

How to create a new div element with jQuery.

$("<div/>");

Add some text to the new div.

$("<div/>", {
    text: "Hello World !"
});

Add a css class to the new div.

$("<div/>", {
    text: "Hello World !",
    "class": "className"
});

Append the new div to the body of the document.

$("<div/>", {
    text: "Hello World !",
    "class": "className"
}).appendTo("body");

Result.

Front-end.

Back-end.

References:

• jQuery() – Create DOM elements on the fly
• Get Started With jQuery in 2 Simple Steps