Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to dynamically create new elements in JavaScript?
In this article, we will learn how to dynamically create new elements in JavaScript with the help of the createElement browser API.
Dynamic element creation in JavaScript allows you to generate new HTML elements on the get-go. Whether you need to add content to a web page based on user interactions or dynamically generate elements for a specific task, it can help enhance the flexibility and interactivity of web applications.
Let's understand how to implement this with the help of some examples.
Example 1
In this example, we will have a button element and on clicking it, we will generate a new "p" element and append it to the DOM.
Filename: index.html
<html lang="en">
<head>
<title>How to dynamically create new elements in JavaScript?</title>
</head>
<body>
<h3>How to dynamically create new elements in JavaScript?</h3>
<div id="container">
<!-- Newly created elements will be appended here -->
</div>
<button onclick="createNewElement()">Create Element</button>
<script>
function createNewElement() {
// Create a new paragraph element
var newParagraph = document.createElement('p');
// Set the text content of the paragraph
newParagraph.textContent = 'This is a dynamically created paragraph.';
// Append the paragraph to the container div
var container = document.getElementById('container');
container.appendChild(newParagraph);
}
</script>
</body>
</html>
Example 2
In this example, we will follow the above code structure, and dynamically create new elements with 4 different methods, using insertAdjacentHTML, cloneNode, appendChild, and document.write. Here, different methods and concepts are used to dynamically create new elements in JavaScript.
Filename: index.html
<html lang="en">
<head>
<title>How to dynamically create new elements in JavaScript?</title>
</head>
<body>
<h3>How to dynamically create new elements in JavaScript?</h3>
<div id="container">
<!-- Newly created elements will be appended here -->
</div>
<div id="original">Original content</div>
<button onclick="createNewElement()">Create Element using insertAdjacentHTML</button>
<button onclick="createNewElementCloneNode()">Create Element using cloneNode</button>
<button onclick="createNewElementAppend()">Create Element using appendChild</button>
<button onclick="createNewElementWrite()">Create Element using document.write</button>
<script>
function createNewElement() {
// Example 1: Using insertAdjacentHTML method to add dynamic content
var container = document.getElementById('container');
container.insertAdjacentHTML('beforeend', '<p>This is a dynamically created paragraph using insertAdjacentHTML.</p>');
}
function createNewElementCloneNode() {
// Example 2: Using cloneNode method to add dynamic content
var originalElement = document.getElementById('original');
var clonedElement = originalElement.cloneNode(true);
container.appendChild(clonedElement);
}
function createNewElementAppend() {
// Example 3: Using appendChild() method to add dynamic content
var newDiv = document.createElement('div');
newDiv.textContent = 'This is a dynamically created div using appendChild.';
container.appendChild(newDiv);
}
function createNewElementWrite() {
// Example 4: Using document.write Method to add dynamic content
document.write('<p>This is a dynamically created paragraph using document.write.</p>');
}
</script>
</body>
</html>
Conclusion
In conclusion, dynamically creating elements in JavaScript opens up a wide range of possibilities for creating interactive and dynamic web applications. By leveraging JavaScript's createElement(), appendChild(), document.write, cloneNode, and insertAdjacentHTML methods, we learned how to dynamically create new elements on the web page.
2K+ Views
