Dynamic User Interfaces in JavaScript Last Updated : 19 Jun, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report User interfaces (UIs) have evolved from static layouts to dynamic and interactive experiences and JavaScript is a versatile and powerful programming language that plays a significant role in creating dynamic UIs that respond to user actions in real-time. Below are the methods to create a dynamic user interface in JavaScript: Table of Content DOM ManipulationWeb APIs and AJAXDOM ManipulationDOM manipulation involves using JavaScript to modify web page elements, their properties, and content dynamically, creating interactive and responsive user interfaces. With this approach, you can add or remove elements on a web page based on user interactions. Example : In this example HTML document uses JavaScript for DOM manipulation, toggling the visibility of an element when a button is clicked, making it visible if hidden, and vice versa. HTML <!DOCTYPE html> <html> <head> <title> The DOM Manipulation</title> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <button id="Button"> Toggle Element </button> <div id="element" style="display: none;"> Welcome to GeeksforGeeks Website! </div> <script> let button = document.getElementById("Button"); let element = document.getElementById("element"); button.addEventListener("click", function () { if (element.style.display === "none" || element.style.display === "") { element.style.display = "block"; } else { element.style.display = "none"; } }); </script> </body> </html> Output: Web APIs and AJAXThe Dynamic UIs often involve retrieving data from the external sources and updating the UI accordingly Using the Web APIs and AJAX you can fetch data from the servers without requiring a page refresh. Example: In this example HTML document uses JavaScript with XMLHttpRequest to fetch data from a JSON API when a button is clicked and displays the fetched title in a div element. HTML <!DOCTYPE html> <html> <head> <title>Web</title> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <button id="Button"> Fetch Data </button> <div id="data1"></div> <script> let Button = document.getElementById("Button"); let data1 = document.getElementById("data1"); Button.addEventListener("click", () => { let x = new XMLHttpRequest(); x.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); x.onload = function () { if (x.status === 200) { const data = JSON.parse(x.responseText); data1.textContent = `Title: ${data.title}`; } else { console.error( "Request failed with status:", x.status); } }; x.onerror = function () { console.error( "An error occurred during the request."); }; x.send(); }); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article Implementing Interfaces in JavaScript S subramanyasmgm Follow Improve Article Tags : JavaScript Web Technologies javascript-basics Similar Reads Implementing Interfaces in JavaScript In JavaScript, there is no built-in concept of interfaces like you might find in languages like Java or C#. However, you can achieve similar functionality by defining and implementing your own interfaces using objects and classes. In this explanation, this article will guide you through the process 2 min read JavaScript - How is JS Dynamically Typed ? Writing a data type (like we do in C/C++/Java) is not requiredA variable name can hold any type of informationMainly data type is stored with value (not with variable name) and is decided & checked at run timeJavaScriptlet x = 42; console.log(x) x = "hello"; console.log(x) x = [1, 2, 3] console. 1 min read Generics Interface in typescript "A major part of software engineering is building components that not only have well-defined and consistent APIs but are also reusable. " This sentence is in the official documentation we would start with. There are languages that are strong in static typing & others that are weak in dynamic typ 5 min read Interfaces in TypeScript TypeScript is a statically typed superset of JavaScript that adds optional types, classes, interfaces, and other features to help developers build robust and maintainable applications. One of the most powerful features of TypeScript is interfaces, which allow you to define the structure of objects, 4 min read How Dynamic Arrays Work in JavaScript ? A dynamic array, also known as a resizable array or a dynamic array list, is a data structure that allows its size to be changed dynamically during program execution. Unlike static arrays, which have a fixed size determined at the time of declaration, dynamic arrays can grow or shrink in size as nee 3 min read How to Use Dynamic Variable Names in JavaScript? Dynamic variable names are variable names that are not predefined but are generated dynamically during the execution of a program. This means the name of a variable can be determined at runtime, rather than being explicitly written in the code.Here are different ways to use dynamic variables in Java 2 min read Like