How to use innerHTML property In Javascript
In this appraoch, we are using HTML DOM innerHTML property that helps us to get the content of the selected elemnet. We are selecting the element that we want to remove and craeting an eventListener of onclick. When the button will be clicked the event will occur and it will remove all the content of that selected element by setting `innerHTML=””`.
Example: This example shows the implementation of the above-explained approach.
html
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < title > Document </ title > </ head > < body > < ul > < li >Get Up in Morning</ li > < li >Do some exercise</ li > < li >Get Ready for school</ li > < li >Study Daily</ li > < li >Do homework</ li > </ ul > < input id = "btn" type = "button" value = "Remove Childrens" > </ body > < script > function deleteChild() { let e = document.querySelector("ul"); e.innerHTML = ""; } let btn = document.getElementById( "btn").onclick = function () { deleteChild(); } </ script > </ html > |
Output:
Remove all the child elements of a DOM node in JavaScript
Child elements are the nested elements in the HTML and we have to remove them. To remove the elements in HTML we need to use DOM methods.
There are so many ways to remove the child elements of a DOM node:
Table of Content
- Using removeChild()
- Using innerHTML property