YouTipJavaScript HTML DOM Changing HTML Content
- Home
- HTML
- JavaScript
- CSS
- Vue
- React
- Python3
- Java
- C
- C++
- C#
- AI
- Go
- SQL
- Linux
- VS Code
- Bootstrap
- Git
- Local Bookmarks
JavaScript Tutorial
JavaScript TutorialJavaScript IntroductionJavaScript UsageJavaScript VScodeRun JavaScript in Chrome JavaScript OutputJavaScript Syntax JavaScript StatementsJavaScript CommentsJavaScript VariablesJavaScript Data TypesJavaScript ObjectsJavaScript FunctionsJavaScript ScopeJavaScript EventsJavaScript StringsJavaScript String TemplatesJavaScript OperatorsJavaScript Comparison and Logical OperatorsJavaScript If…Else StatementsJavaScript switch StatementsJavaScript for LoopJavaScript while LoopJavaScript break and continue StatementsJavaScript typeofJavaScript Type ConversionJavaScript Regular ExpressionsJavaScript Errors – Throw, Try, and CatchJavaScript DebuggingJavaScript HoistingJavaScript Strict ModeJavaScript Common MistakesJavaScript FormsJavaScript Form ValidationJavaScript Validation APIJavaScript Reserved KeywordsJavaScript thisJavaScript let and constJavaScript JSONJavaScript voidJavaScript Asynchronous ProgrammingJavaScript PromiseJavaScript async/awaitJavaScript Code ConventionsJavaScript Quiz
JS Functions
JavaScript Function DefinitionJavaScript Function ParametersJavaScript Function InvocationJavaScript Closures
JS Classes
JavaScript ClassesJavaScript Class InheritanceJavaScript Static Methods
JS HTML DOM
DOM IntroductionDOM HTMLDOM CSSDOM EventsDOM EventListenerDOM ElementsHTMLCollection ObjectNodeList Object
JS Advanced Tutorial
JavaScript ObjectsJavaScript prototypeJavaScript Number ObjectJavaScript StringJavaScript DateJavaScript ArrayJavaScript BooleanJavaScript MathJavaScript RegExp Object
JS Browser BOM
JavaScript WindowJavaScript Window ScreenJavaScript Window LocationJavaScript Window HistoryJavaScript NavigatorJavaScript Popup BoxesJavaScript Timing EventsJavaScript Cookie
JS Libraries
JavaScript LibrariesTesting JavaScript with jQueryTesting JavaScript with Prototype
JS Examples
JavaScript ExamplesJavaScript Object ExamplesJavaScript Browser Object ExamplesJavaScript HTML DOM ExamplesJavaScript Summary
JS Reference
JavaScript ObjectsHTML DOM ObjectsJavaScript Asynchronous ProgrammingJavaScript Static Methods
JavaScript HTML DOM Changing CSS
Deep Dive
Scripting Language
Java (Programming Language)
script
Web Browser
Programming
Web Design and Development
Programming Languages
Web Service
Script
Development Tools
JavaScript HTML DOM - Changing HTML
The HTML DOM allows JavaScript to change the content of HTML elements.
Changing the HTML Output Stream
JavaScript can create dynamic HTML content:
Today's date is: Thu Jun 18 2026 01:43:27 GMT+0000 (Coordinated Universal Time)
In JavaScript, document.write() can be used to write content directly to the HTML output stream.
Example
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Never use document.write() after the document has finished loading. It will overwrite the document. |
Changing HTML Content
The easiest way to modify the content of an HTML element is by using the innerHTML property.
To change the content of an HTML element, use this syntax:
document.getElementById(id).innerHTML=new HTML
This example changes the content of a <p> element:
Example
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
This example changes the content of an <h1> element:
Example
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
</body>
</html>
Example Explained:
- The HTML document above contains an
<h1>element withid="header" - We use the HTML DOM to get the element with
id="header" - JavaScript changes the element content (
innerHTML)
Changing HTML Attributes
To change the attribute value of an HTML element, use this syntax:
document.getElementById(id).attribute=new value
This example changes the src attribute of an <img> element:
Example
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
Example Explained:
- The HTML document above contains an
<img>element withid="image" - We use the HTML DOM to get the element with
id="image" - JavaScript changes the element's attribute (from "smiley.gif" to "landscape.jpg")