YouTipHTML DOM Modification
-- Learning is not just about technology, but also about dreams!
- Home
- HTML
- JavaScript
- CSS
- Vue
- React
- Python3
- Java
- C
- C++
- C#
- AI
- Go
- SQL
- Linux
- VS Code
- Bootstrap
- Git
- Local Bookmarks
HTML DOM Tutorial
HTML DOM Tutorial HTML DOM Introduction HTML DOM Nodes HTML DOM Methods HTML DOM Properties HTML DOM Access HTML DOM Modification HTML DOM Modify HTML Content HTML DOM Elements HTML DOM Events HTML DOM Navigation HTML DOM Summary DOM Examples
DOM Reference Manual
< Previous: HTML DOM Access Next: HTML DOM Modify HTML Content >
Deep Dive
- Scripts
- Programming Languages
- Development Tools
- Web Services
- Scripting Languages
- Web Design & Development
- Computer Science
- Software
- Web Service
- Programming
HTML DOM - Modification
Modifying HTML = changing elements, attributes, styles, and events.
Modifying HTML Elements
Modifying the HTML DOM means many different aspects:
- Changing HTML content
- Changing CSS styles
- Changing HTML attributes
- Creating new HTML elements
- Removing existing HTML elements
- Changing events (handlers)
In the following chapters, we will learn in depth the common methods for modifying the HTML DOM.
Creating HTML Content
The simplest way to change the content of an element is by using the innerHTML property.
The following example changes the HTML content of a <p> element:
Example
Hello World!
document.getElementById("p1").innerHTML="New text!";The paragraph content was modified by script.
We will explain the details in the example in the following chapters.
Changing HTML Style
Through the HTML DOM, you can access the style object of an HTML element.
The following example changes the HTML style of a paragraph:
Example
Hello world!
Hello world!
document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger";Creating New HTML Elements
To add a new element to the HTML DOM, you must first create the element (element node), and then append it to an existing element.
Example
This is a paragraph.
This is another paragraph.