HTML DOM BR Object

Last Updated : 15 Jun, 2023

The DOM BR Object is used to represent the HTML <br> element. The br element is accessed by getElementById().

Syntax:

document.getElementById(id)

Where “id” is the ID assigned to the br tag.

Property:

clear: It is used to Sets or return the flow of text around floating objects

Example 1: In this example, we will use DOM BR Object

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title>HTML | DOM BR Object</title>
    <style>
        body {
            text-align: center;
        }
        h1 {
            color: green;
        }
    </style>
</head>
   
<body>
    <h1>GeeksforGeeks</h1>
    <h2>DOM br Object</h2>
    <!-- br tag is used here -->
    <p>
          GeeksforGeeks:
        <br id="GFG"> Computer science portal
    </p>
    <button onclick="myGeeks()">Subnit</button>
   
    <script>
        function myGeeks() {
            let w = document.getElementById("GFG");
            w.style.display = "none";
        }
    </script>
</body>
   
</html>

Output:

Example 2: Br Object can be created by using the document.createElement Method.

HTML

<!DOCTYPE html>
<html>
 
<body>
    <h1>GeeksForGeeks</h1>
    <h2>DOM BR Object</h2>
    <button onclick="Geeks()"
            style="margin-bottom:20px;">
        Submit
    </button>
    <div id="GFG">
        <span>Hello, </span>
        <span>Geeks.</span>
        <span>For</span>
        <span>Geeks</span>
    </div>
   
    <script>
        function Geeks() {
            // Get the div element with id="GFG" 
            let g = document.getElementById("GFG");
 
            // Get all span elements inside of div. 
            let f = g.getElementsByTagName("SPAN");
 
            //  Create a loop which will insert a br
            //     element before each span element in div,
            //     starting from the second span element.             
            let j;
            for (j = 1; j < f.length; j++) {
                let w = document.createElement("BR");
                g.insertBefore(w, f[j]);
            }
        }
    </script>
</body>
 
</html>