Quick Reach
The innerHTML property
The innerHTML is a property of document object (DOM) which is used to get or set the content of HTML elements.
You can set HTML content of any element including <html>, <body> tags by using JavaScript innerHTML.
See an example of innetHTML property
Following are few examples of using innerHTML with code but let us first look at its syntax:
Syntax to use innerHTML
This is how you may use the innerHTML property to set content:
HTMLelement.innerHTML = “content here”;
e.g.
document.getElementById(“divex”).innerHTML = “content here”;
Now let us look at examples of using innerHTML.
JS innerHTML example to set div content
Following is an example to use innerHTML where we will set the content of div element. The div already contains some text. As you click on the button, the innerHTML property will be used to change the content of div.
Experience this example online
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html>
<body>
<div id=“divex”>This is innerHTML demo</div><br />
<button onclick=“changebg()”>Click here to change content by innerHTML</button>
<script type=“text/javascript”>
function changebg(){
document.getElementById(“divex”).innerHTML = “Content changed by using innerHTML”;
}
</script>
</body>
</html>
|
As you can see, the div element content is changed by using innerHTML.
innerHTML example to add HTML tags
Not only you can change the text by using innerHTML JavaScript but also you can add HTML tags as well. Following example adds <p> tag inside a div tag by using innerHTML property. Click the following link or image to see online demo:
Experience this example online
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<body>
<div id=“divex” style=“border: 1px solid red;”>This is innerHTML demo</div><br />
<button onclick=“changebg()”>Click here to change content by innerHTML</button>
<script type=“text/javascript”>
function changebg(){
var existing_div = document.getElementById(“divex”).innerHTML;
document.getElementById(“divex”).innerHTML = existing_div + “<p style=’border:1px solid green’>This is new text in paragraph</p>”;
}
</script>
</body>
</html>
|
As you click on the button, the <p> tag is added by using innerHTML property. First, we get div content by using innerHTML and then the paragraph is given its own style i.e. green border is added.
document.getelementbyid innerhtml example to get content
As mentioned earlier, you can use the innerHTML property to get or set the content. In above section, we have shown how to use innerHTML to set the content.
The following example shows how to use innerHTML property to get the content and then we will show returned content in an alert.
Experience this example online
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<body>
<div id=“divex” style=“border: 1px solid red;”>This is innerHTML demo</div><br />
<button onclick=“changebg()”>Click here to GET content by JS innerHTML</button>
<script type=“text/javascript”>
function changebg(){
var existing_div = document.getElementById(“divex”).innerHTML;
alert(existing_div);
}
</script>
</body>
</html>
|
You can see, the alert is showing the content of div element.
Related topics: Javascript String | getElementByid method
Leave A Comment?