Create an Element with Class, ID or Style Attribute in Javascript

When working with JavaScript, it is often necessary to dynamically create elements with specific attributes such as class, id, or style. This allows you to tailor the elements to your desired structure and appearance. By programmatically generating elements, you can add interactivity, manipulate the DOM, and enhance the user experience of your web applications. JavaScript provides various methods to create elements and assign attributes to them.

In this article, we will explore different approaches to generating new elements with javascript. You will be able to dynamically generate elements with class, id, or style attributes, empowering you to build more interactive and customized web applications.

01. Using "document.createElement()", "element.classList.add()" and "element.setAttribute()"
02. Using "innerHTML" property and template literals
03. Using "insertAdjacentHTML()" method
04. Using "setAttribute()" for individual attributes

01. Using "document.createElement()", "element.classList.add()" and "element.setAttribute()"

<!DOCTYPE html>
<html>
<head>
  <style>
    #container{
      background-color: #E3483A;
      padding: 20px;
      width: 100px;
      height: 100px;
    }
    
    .myClass {
      background-color: #EFBA4D;
      font-size: 18px;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  
  <div id="container"></div>

  <script>
    var element = document.createElement("div");
    element.classList.add("myClass");
    element.id = "myId";
    element.setAttribute("style", "color: red;");
    document.getElementById("container").appendChild(element);
  </script>
</body>
</html>

In this method, a <div> element is created using document.createElement("div"). Then, the class is added to the element using element.classList.add("myClass"), the id is set with element.id = "myId", and the style attribute is defined using element.setAttribute("style", "color: red;"). Finally, the newly created element is appended to an existing element with the id "container" using appendChild().

Read Also:

02. Using "innerHTML" property and template literals

<!DOCTYPE html>
<html>
<head>
  <style>
    #container{
      background-color: #E3483A;
      padding: 20px;
      width: 100px;
      height: 100px;
    }
    
    .myClass {
      background-color: #EFBA4D;
      font-size: 18px;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  
  <div id="container"></div>

  <script>
    var element = document.createElement("div");
    element.innerHTML = `<div class="myClass" id="myId" style="color: red;"></div>`;
    document.getElementById("container").appendChild(element);
  </script>
</body>
</html>

In this method, a new <div>element is created using document.createElement("div"). The desired HTML code, including the class, id, and style attributes, is assigned to the innerHTMLproperty using template literals. Finally, the newly created element is appended to an existing element with the id "container" using appendChild().

Read Also:

03. Using "insertAdjacentHTML()" method

<!DOCTYPE html>
<html>
<head>
  <style>
    #container{
      background-color: #E3483A;
      padding: 20px;
      width: 100px;
      height: 100px;
    }
    
    .myClass {
      background-color: #EFBA4D;
      font-size: 18px;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  
  <div id="container"></div>

  <script>
    var parentElement = document.getElementById("container");
    parentElement.insertAdjacentHTML("beforeend", '<div class="myClass" id="myId" style="color: red;"></div>');
  </script>
</body>
</html>

In this method, an existing parent element with the id "parentElement" is selected using document.getElementById(). The insertAdjacentHTML()0is then used to insert the desired HTML code, including the class, id, and style attributes, at the end of the parent element. The "beforeend"argument ensures that the HTML code is added as the last child of the parent element.

04. Using "setAttribute()" for individual attributes

<!DOCTYPE html>
<html>
<head>
  <style>
    #container{
      background-color: #E3483A;
      padding: 20px;
      width: 100px;
      height: 100px;
    }
    
    .myClass {
      background-color: #EFBA4D;
      font-size: 18px;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  
  <div id="container"></div>

  <script>
    var element = document.createElement("div");
    element.setAttribute("class", "myClass");
    element.setAttribute("id", "myId");
    element.setAttribute("style", "color: red;");
    document.getElementById("container").appendChild(element);
  </script>
</body>
</html>

In this method, a new <div> element is created using document.createElement("div") The class, id, and style attributes are set individually using setAttribute() The class attribute is assigned using element.setAttribute("class", "myClass"), the id attribute with element.setAttribute("id", "myId"), and the style attribute with element.setAttribute("style", "color: red;") Finally, the newly created element is appended to an existing element with the id "container" using appendChild()

Read Also:

Archive