HTML DOM Methods

JavaScript HTML DOM Methods are functions that can be used to manipulate HTML and XML documents using JavaScript. These methods are part of the Document Object Model (DOM) API, which is a programming interface for web developers that allows them to interact with the elements of a webpage as objects.

Here are some examples of common JavaScript HTML DOM methods:

getElementById()

This method is used to get an element in the HTML document by its unique ID.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript getElementById() Method</h1>
<p id="demo"></p>

<script>
    let name = "Webtutor.dev";
    document.getElementById("demo").innerHTML = name;
</script>

</body>
</html>

Preview

getElementsByTagName()

This method is used to get a collection of elements in the HTML document with a specified tag name.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript getElementsByTagName() Method</h1>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<p id="demo"></p>

<script>
    let lang = document.getElementsByTagName("li");
    document.getElementById("demo").innerHTML = lang[2].innerHTML;
</script>

</body>
</html>

Preview

createElement()

This method is used to create a new HTML element.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript createElement() Method</h1>

<script>
    let ele = document.createElement("p");
    ele.innerText = "Create New Element";
    document.body.appendChild(ele);
</script>

</body>
</html>

Preview

appendChild()

This method is used to add a new child element to an existing HTML element.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript appendChild() Method</h1>
<ul id="lang">

</ul>

<script>
    function createlang(name) {
        let li = document.createElement('li');
        li.textContent = name;
        return li;
    }
    let lang = document.querySelector('#lang');

    lang.appendChild(createlang('HTML'));
    lang.appendChild(createlang('CSS'));
    lang.appendChild(createlang('JavaScript'));
</script>

</body>
</html>

Preview

removeChild()

This method is used to remove a child element from an existing HTML element.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript removeChild() Method</h1>
<ul id="lang">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<script>
    let lang = document.getElementById('lang');
    lang.removeChild(lang.lastElementChild);
</script>

</body>
</html>

Preview

setAttribute()

This method is used to set the value of an attribute for an HTML element.

Example

<!DOCTYPE html>
<html>
<style>
    .red { color: red; }
</style>
<body>

<h1 id="demo">JavaScript setAttribute() Method</h1>
<button onclick="myFunction()">Click Me</button>

<script>
    function myFunction() {
        document.getElementById("demo").setAttribute("class", "red");
    }
</script>

</body>
</html>

Preview

getAttribute()

This method is used to get the value of an attribute for an HTML element.

Example

<!DOCTYPE html>
<html>
<body>

<h1 id="getAttr" class="red">JavaScript getAttribute() Method</h1>
<p id="demo"></p>

<script>
    let ele = document.getElementById("getAttr");
    let text = ele.getAttribute("class");
    document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Preview

By using these and other JavaScript HTML DOM methods, web developers can manipulate the content and structure of a webpage in real-time, making it more dynamic and interactive.

HTML DOM

DOM Document

HTML DOM Methods

getElementById()

Example

getElementsByTagName()

Example

createElement()

Example

appendChild()

Example

removeChild()

Example

setAttribute()

Example

getAttribute()

Example

Links

Tutorials

Connect with us