Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • JS Tutorial
  • JS Exercise
  • JS Interview Questions
  • JS Array
  • JS String
  • JS Object
  • JS Operator
  • JS Date
  • JS Error
  • JS Projects
  • JS Set
  • JS Map
  • JS RegExp
  • JS Math
  • JS Number
  • JS Boolean
  • JS Examples
  • JS Free JS Course
  • JS A to Z Guide
  • JS Formatter
Open In App
Next Article:
HTML JavaScript
Next article icon

JavaScript innerHTML

Last Updated : 24 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

The innerHTML property in JavScript is used to append the dynamic HTML or text content to an element using JavaScript. It is designed to add dynamic HTML, but developers also use it to add text content as well. It can be directly used with the element by selecting it using DOM manipulation.

Syntax:

selctedHTMLElement.innerHTML = "contentToAppend";

Example 1: The below code shows a basic implementation of innerHTML property to append HTML directly to an element.

HTML 
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width,                                     initial-scale=1.0">     <title>         JavaScript innerHTML     </title>     <style>         #container{             text-align: center;         }     </style> </head> <body>     <div id="container">         <h1 style="color: green;">             GeeksforGeeks         </h1>         <h2>             The below content is added dynamically             using the innerHTML property in JavaScript.         </h2>     </div>            <script>         const container = document.getElementById('container');         container.innerHTML +=          `             <h3>                 Hey Geek, <br/>                 Welcome to GeeksforGeeks             </h3>             <p>                 This content is added using the                  innerHTML property.             </p>         `;     </script> </body> </html>

Output:

innerHTMLOP

Example 2: The below code implements the innerHTML property with click event to add HTML onclick to the button.

HTML 
<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width,                                     initial-scale=1.0">     <title>         JavaScript innerHTML     </title>     <style>         #container {             text-align: center;         }     </style> </head>  <body>     <div id="container">         <h1 style="color: green;">             GeeksforGeeks         </h1>         <h2>             Click the below button to dynamically add             the HTML using the innerHTML property.         </h2>         <button id="myBtn">Add HTML</button>     </div>      <script>         const myBtn = document.getElementById('myBtn');         function clickHandler() {             const container =                  document.getElementById('container');             container.innerHTML +=                 `                 <h3>                     Hey Geek, <br/>                     Welcome to GeeksforGeeks                 </h3>                 <p>                     This content is added using                      the innerHTML property.                 </p>             `;         }         myBtn.addEventListener('click', clickHandler);     </script> </body>  </html>

Output:

onclickGIF


Next Article
HTML JavaScript

A
abhish8rzd
Improve
Article Tags :
  • JavaScript
  • Web Technologies

Similar Reads

  • HTML JavaScript
    HTML JavaScript is the most popular programming language that helps to add interactivity and provides dynamic behavior. It is known as the client-side scripting language for web pages. JavaScript is used for various purposes, including DOM manipulation, asynchronous requests (AJAX), event handling,
    2 min read
  • DHTML JavaScript
    DHTML stands for Dynamic HTML. Dynamic means that the content of the web page can be customized or changed according to user inputs i.e. a page that is interactive with the user. In earlier times, HTML was used to create a static page. It only defined the structure of the content that was displayed
    3 min read
  • JavaScript HTML DOM
    The JavaScript HTML DOM (Document Object Model) is a powerful tool that represents the structure of an HTML document as a tree of objects. It allows JavaScript to interact with the structure and content of a webpage. By manipulating the DOM, you can update the content, structure, and styling of a pa
    4 min read
  • How to use innerHTML in JavaScript ?
    The innerHTML property in JavaScript allows you to get or set the HTML content of an element as a string. Syntax ForGetting HTML content of an element:let element = document.getElementById("myElementId"); let htmlContent = element.innerHTML;Setting HTML content of an element:let element = document.g
    2 min read
  • Difference between JavaScript and HTML
    JavaScriptJavaScript is a programming language that conforms to the ECMAScript specification. It is a high-level scripting language introduced by Netscape to be run on the client-side of the web browser. It can insert dynamic text into HTML. JavaScript is also known as the browser’s language. HTMLHT
    2 min read
  • Introduction to JavaScript
    JavaScript is a versatile, dynamically typed programming language used for interactive web applications, supporting both client-side and server-side development, and integrating seamlessly with HTML, CSS, and a rich standard library. JavaScript is a single-threaded language that executes one task at
    8 min read
  • HTML | DOM Script Object
    The DOM Script Object is used to represent the HTML <script> element. The script element is accessed by getElementById(). Properties: async: It is used to specify the script is executed asynchronously. charset: It is used to specify the character encoding used in an external script file. defer
    2 min read
  • How to Make a Breakline in JavaScript for innerHTML?
    In JavaScript, while working with HTML you will frequently need to add line breaks whether building a complex or simple web application. In this article, you will learn to insert line breaks in JavaScript's innerHTML. These are the following approaches: Table of Content Using < br > TagUsing T
    3 min read
  • Dynamic User Interfaces in JavaScript
    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 use
    2 min read
  • HTML DOM innerHTML Property
    The innerHTML property sets or returns the HTML content (inner HTML) of an element. It allows you to manipulate the inner content, including HTML tags, by assigning new HTML strings or retrieving existing content, making it useful for dynamic updates on web pages. SyntaxIt returns the innerHTML Prop
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences