To create a new element with a class using jQuery, you can follow these steps:
- Create the element using the
$("<element>")syntax, where<element>is the HTML tag of the element you want to create (e.g., “div”, “span”, “p”, etc.). - Chain the
addClass()method to add the desired class to the element. - Optionally, you can set other attributes or properties of the element using jQuery’s methods.
- Finally, append the new element to the desired location in the DOM using the
append()orappendTo()method.
Here’s an example that creates a new <div> element with the class “my-class” and appends it to the body of the page:
// Create a new <div> element with the class "my-class"
var newElement = $("<div>").addClass("my-class");
// Optionally, set other attributes or properties
newElement.text("Hello, world!");
// Add the new element to the body
$("body").append(newElement);
You can replace "my-class" with any class name you want, and modify the element’s attributes or properties according to your needs. Also, you can use a different selector instead of $("body") to append the element to a different location in the DOM.
jQuery creates an element with a class example
Simple example code.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Create Element with Class</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="createButton">Create Element</button>
<script>
$(document).ready(function() {
// Create element with class on button click
$("#createButton").click(function() {
// Create a new <div> element with the class "my-class"
var newElement = $("<div>").addClass("my-class");
// Set some text content for the new element
newElement.text("Hello, world!");
// Add the new element to the body
$("body").append(newElement);
});
});
</script>
</body>
</html>
Output:
In this example, we have an HTML button with the id “createButton” that triggers the creation of a new element when clicked.
Make sure to include the jQuery library using the provided CDN URL in the <head> section of your HTML file.
Another example uses jQuery to create a new element with a class:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Create Element with Class</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
// Create a new <div> element with the class "my-class"
var newElement = $("<div>", {
class: "my-class"
});
// Set some text content for the new element
newElement.text("Hello, world!");
// Add the new element to the DOM
$("body").append(newElement);
});
</script>
</body>
</html>
Do comment if you have any doubts or suggestions on this JQuery code.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version