---
title: "How do you create and manipulate HTML elements dynamically using JavaScript?"  
description: "How do you create and manipulate HTML elements dynamically using JavaScript?"  
author: "Revati S Misra"  
published: 2023-07-16  
updated: 2023-07-17  
canonical: https://www.mindstick.com/forum/159108/how-do-you-create-and-manipulate-html-elements-dynamically-using-javascript  
category: "javascript"  
tags: ["javascript", "html input"]  
reading_time: 2 minutes  

---

# How do you create and manipulate HTML elements dynamically using JavaScript?

How do you create and manipulate [HTML elements](https://www.mindstick.com/forum/158688/how-can-you-dynamically-create-html-elements-using-jquery) dynamically using [JavaScript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript)?

## Replies

### Reply by Aryan Kumar

Sure, here are the steps on how to create and manipulate [HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) [elements](https://www.mindstick.com/forum/1440/wpf-button-with-multiple-text-elements) dynamically using JavaScript:

1. **Create a new HTML element.** You can use the `document.createElement()` method to create a new HTML element. For example, to create a new `div` element, you would use the following code:

```plaintext
const divElement = document.createElement("div");
```

1. **Set the attributes of the element.** You can use the `setAttribute()` method to set the attributes of an HTML element. For example, to set the `id` attribute of the `div` element to `myDiv`, you would use the following code:

```plaintext
divElement.setAttribute("id", "myDiv");
```

1. **Append the element to the DOM.** Once you have created and set the attributes of an HTML element, you need to append it to the DOM. You can do this using the `appendChild()` method. For example, to append the `div` element to the `body` element, you would use the following code:

```plaintext
document.body.appendChild(divElement);
```

1. **Manipulate the element.** Once the element has been appended to the DOM, you can manipulate it using JavaScript. For example, you can change the text content of the element, or you can add event listeners to the element.

Here is an example of how to create and manipulate an HTML element dynamically using JavaScript:

```plaintext
const divElement = document.createElement("div");
divElement.setAttribute("id", "myDiv");
divElement.textContent = "This is a dynamically created div element.";
document.body.appendChild(divElement);

// Add an event listener to the div element
divElement.addEventListener("click", () => {
  console.log("The div element was clicked.");
});
```

This code will create a new `div` element with the `id` of `myDiv`. The text content of the `div` element will be "This is a dynamically created div element." The `div` element will then be appended to the `body` element. Finally, an event listener will be added to the `div` element that will log a message to the console when the `div` element is clicked.


---

Original Source: https://www.mindstick.com/forum/159108/how-do-you-create-and-manipulate-html-elements-dynamically-using-javascript

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.