Skip to content

jQuery create element with class

  • by

To create a new element with a class using jQuery, you can follow these steps:

  1. 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.).
  2. Chain the addClass() method to add the desired class to the element.
  3. Optionally, you can set other attributes or properties of the element using jQuery’s methods.
  4. Finally, append the new element to the desired location in the DOM using the append() or appendTo() 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:

jQuery create element with class

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

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading