how to increase the height of div dynamically in javascript

In this article, you will learn how to increase the height of a div element dynamically in javascript. I will show you two methods to increase the height of a div dynamically.

Increase the height of div on button click dynamically.

In the first example, when you click on the button, each time the height of the div will automatically increase. The example is given below.

  <div id="container">
       This is the parent element.
  </div>
  <button onclick="myFunction()">click here</button>
  <script>
    let myHeight = 25; 
    function myFunction() { document.querySelector('#container').style.height = myHeight+"px" ;
         myHeight ++;
      }
  </script>

Increase the height of div input type range.

Using the <input type='range'/>,we can also change the height of a div element in real time whenever you slide it. Look at the example below.

  <div id="container">
       This is the parent element.
  </div>
  <input min="25" max="300" type="range" oninput="myFunction(this.value)" onchange="myFunction(this.value)"/>
  <script>
    function myFunction(v) {
       document.querySelector('#container').style.height = v+"px" ;
    }
  </script>

Conclusion

In this article, you have learned how to dynamically increase the height of a div using javascript.