HTML DOM modifications
May 09, 2021 HTML DOM
Table of contents
HTML DOM - Modify
By the end of this section, you'll learn how to modify HTML to change elements, properties, styles, and events.
Modify the HTML element
Modifying HTML DOM means many different things:
- Change the HTML content
- Change the CSS style
- Change the HTML property
- Create a new HTML element
- Remove an existing HTML element
- Change events (handlers)
In the next section, we'll dive into the common ways to modify HTML DOM.
Create HTML content
The easiest way to change the content of an element is to use the innerHTML property.
The following example changes the HTML content of an element:
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
Try it out . . .
|
We'll explain the details of the examples to you in the following sections, and I hope you'll have a better understanding of the above examples. |
|---|
Change the HTML style
HTML DOM allows you to access style objects for HTML elements.
Here's an example of changing the HTML style of a paragraph that you can try to modify:
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
Try it out . . .
Create a new HTML element
If you need to add a new element to the HTML DOM, you must first create the element (element node) and then append it to the existing element.
Learn HTML DOM modifications and recommend that you do more hands-on exercises, preferably by doing several instances of this section.
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
Try it out . . .