+ 17

What is inner HTML ?

I am a bit confused about DOM. I have started it learning right now. What should I do to learn it or how should I learn it?

dom learn js innerhtml

16th Jun 2018, 8:44 AM

Swapnil

6 Answers

+ 5

For understanding innerHTML property you first need to go through the basics of the javascript object and HTML DOM(Document object model). I will try to explain: 1. JavaScript objects consist of properties and methods. 2. for rendering HTML document web browser creates a DOM, in DOM every HTML element is treated as a JavaScript Object which has set of properties and methods associated with it. Now coming to your Question: HTML code: <p id= "myPara"> We love to Code.</p> JavaScript code: alert(document.getElementById("myPara").innerHTML); here, document.getElementById("myPara") will return our html element <p> as an javascript object which has pre-defined property innerHTML. innerHTML property contains the content of HTML tag. Hope this will help. You can run following HTML code in your browser or in codeplayground to understand it: <html> <body> <p id= "myPara"> We love to Code.</p> <script> alert(document.getElementById("myPara").innerHTML); </script> </body> </html>

18th Jun 2018, 5:04 PM

Shashank Rawat

+ 16

It returns the html content (html tags and their content) that is inside a given element. For example: <div id="test"> <p> return me ! <p> </div> when you call var el = document.querySelector("#test").innerHTML; it'll return <p> return me !! </p> furthermore innerHTML can similarly be used to set/change content as well

16th Jun 2018, 8:59 AM

CHMD