JavaScript HTML Objects Examples

JavaScript treats HTML elements as objects, allowing developers to manipulate their properties, attributes, and behavior dynamically. Here are some practical examples of working with HTML objects using JavaScript.

1. Accessing HTML Elements

Retrieve an HTML element by its id and change its content:

function changeContent() {
    let element = document.getElementById("myParagraph");
    element.innerHTML = "This is the updated content!";
}

HTML:

<p id="myParagraph">Original Content</p>
<button onclick="changeContent()">Update Content</button>

2. Changing Attributes

Modify an element’s attribute dynamically:

function changeImage() {
    let img = document.getElementById("myImage");
    img.src = "newImage.jpg";
    img.alt = "Updated Image";
}

HTML:

<img id="myImage" src="oldImage.jpg" alt="Old Image">
<button onclick="changeImage()">Change Image</button>

3. Creating New Elements

Add a new element to the DOM:

function addElement() {
    let newDiv = document.createElement("div");
    newDiv.innerHTML = "This is a new div element.";
    document.body.appendChild(newDiv);
}

HTML:

<button onclick="addElement()">Add New Element</button>

4. Removing Elements

Remove an HTML element from the DOM:

function removeElement() {
    let element = document.getElementById("removeThis");
    element.remove();
}

HTML:

<p id="removeThis">Remove me!</p>
<button onclick="removeElement()">Remove</button>

5. Styling HTML Elements

Change the style of an element:

function changeStyle() {
    let element = document.getElementById("styledElement");
    element.style.color = "blue";
    element.style.fontSize = "20px";
    element.style.backgroundColor = "lightgray";
}

HTML:

<p id="styledElement">Style me!</p>
<button onclick="changeStyle()">Change Style</button>

6. Iterating Through HTML Collections

Loop through a collection of elements and modify them:

function updateList() {
    let items = document.getElementsByTagName("li");
    for (let i = 0; i < items.length; i++) {
        items[i].style.color = "green";
    }
}

HTML:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<button onclick="updateList()">Update List</button>

7. Manipulating Form Fields

Read and modify form field values:

function updateInput() {
    let inputField = document.getElementById("inputBox");
    let value = inputField.value;
    alert("You entered: " + value);
    inputField.value = "Updated Value";
}

HTML:

<input type="text" id="inputBox" placeholder="Type something">
<button onclick="updateInput()">Update Input</button>

8. Inner vs. Outer HTML

Understand the difference between innerHTML and outerHTML:

function showHTML() {
    let element = document.getElementById("htmlExample");
    alert("Inner HTML: " + element.innerHTML);
    alert("Outer HTML: " + element.outerHTML);
}

HTML:

<div id="htmlExample"><b>Bold Text</b></div>
<button onclick="showHTML()">Show HTML</button>

9. Working with Table Elements

Add a new row to an HTML table:

function addRow() {
    let table = document.getElementById("myTable");
    let row = table.insertRow(-1);
    let cell1 = row.insertCell(0);
    let cell2 = row.insertCell(1);
    cell1.innerHTML = "New Cell 1";
    cell2.innerHTML = "New Cell 2";
}

HTML:

<table id="myTable" border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
</table>
<button onclick="addRow()">Add Row</button>

10. Accessing Custom Data Attributes

Retrieve and modify custom data-* attributes:

function updateData() {
    let element = document.getElementById("dataElement");
    let dataValue = element.getAttribute("data-custom");
    alert("Data Value: " + dataValue);
    element.setAttribute("data-custom", "Updated Value");
}

HTML:

<div id="dataElement" data-custom="Initial Value">Check Data Attribute</div>
<button onclick="updateData()">Update Data</button>

For more examples and tutorials, check out The Coding College. Learn how to leverage JavaScript’s power to manipulate HTML objects and create dynamic, interactive web pages!

Leave a Comment