Can anyone tell me what innerHTML is doing in javascript and give me example how I can use it?
This question is related to
javascript
html
dom
It represents the textual contents of a given HTML tag. Can also contain tags of its own.
Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. By changing an element's innerHTML after some user interaction, you can make much more interactive pages.
However, using innerHTML requires some preparation if you want to be able to use it easily and reliably. First, you must give the element you wish to change an id. With that id in place you will be able to use the getElementById function, which works on all browsers.
The innerHTML property is part of the Document Object Model (DOM) that allows Javascript code to manipulate a website being displayed. Specifically, it allows reading and replacing everything within a given DOM element (HTML tag).
However, DOM manipulations using innerHTML are slower and more failure-prone than manipulations based on individual DOM objects.
The innerHTML fetches content depending on the id/name and replaces them.
<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<title>Learn JavaScript</title>_x000D_
</head>_x000D_
<body>_x000D_
<button type = "button"_x000D_
onclick="document.getElementById('demo').innerHTML = Date()"> <!--fetches the content with id demo and changes the innerHTML content to Date()-->_x000D_
Click for date_x000D_
</button>_x000D_
<h3 id = 'demo'>Before Button is clicked this content will be Displayed the inner content of h3 tag with id demo and once you click the button this will be replaced by the Date() ,which prints the current date and time </h3> _x000D_
_x000D_
</body>_x000D_
</html>When you click the button,the content in h3 will be replaced by innerHTML assignent i.e Date() .
You can collect or set the content of a selected tag.
As a Pseudo idea, its similar to having many boxes within a room and imply the idea 'everything within that box'
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:
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 as a 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 to understand it:
<html>
<body>
<p id= "myPara"> We love to Code.</p>
<script>
alert(document.getElementById("myPara").innerHTML);
</script>
</body>
</html>
The innerHTML property is used to get or set the HTML content of an element node.
Example: http://jsfiddle.net/mQMVc/
// get the element with the "someElement" id, and give it new content
document.getElementById('someElement').innerHTML = "<p>new content</p>";
// retrieve the content from an element
var content = document.getElementById('someElement').innerHTML;
alert( content );
innerHTML explanation with example:
The innerHTML manipulates the HTML content of an element(get or set). In the example below if you click on the Change Content link it's value will be updated by using innerHTML property of anchor link Change Content
Example:
<a id="example" onclick='testFunction()'>Change Content</a>_x000D_
_x000D_
<script>_x000D_
function testFunction(){_x000D_
// change the content using innerHTML_x000D_
document.getElementById("example").innerHTML = "This is dummy content";_x000D_
_x000D_
// get the content using innerHTML_x000D_
alert(document.getElementById("example").innerHTML)_x000D_
_x000D_
}_x000D_
</script>_x000D_
innerHTML is a property of every element. It tells you what is between the starting and ending tags of the element, and it also let you sets the content of the element.
property describes an aspect of an object. It is something an object has as opposed to something an object does.
<p id="myParagraph">
This is my paragraph.
</p>
You can select the paragraph and then change the value of it's innerHTML with the following command:
document.getElementById("myParagraph").innerHTML = "This is my paragraph";
Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. By changing an element's innerHTML after some user interaction, you can make much more interactive pages.
However, using innerHTML requires some preparation if you want to be able to use it easily and reliably. First, you must give the element you wish to change an id. With that id in place you will be able to use the getElementById function, which works on all browsers.
After you have that set up you can now manipulate the text of an element. To start off, let's try changing the text inside a bold tag.
JavaScript Code:
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
This answer is from here
Source: Stackoverflow.com