JavaScript is one of the most widely used programming languages. It is also quite popular for its versatility across the platforms. There are different properties in JavaScript that make your work of building a dynamic website easier. In this article, we will discuss the Inner HTML in JavaScript in the following sequence:
Introduction to JavaScript
JavaScript is used as a client-side programming language as well as a server-side programming language. Node is used to execute JavaScript on the client-side as well as server-side of any application. A node can also be referred to as Node.js at several places.
JavaScript provides a plethora of methods for several functionalities to be performed with ease. This is what made JavaScript one of the most popular programming languages as well as it is also being used widely across several kinds of product development.
Learn the latest UI/UX design techniques and trends through this UX Design Course.
Inner HTML in JavaScript
The inner HTML property in JavaScript is one of the very handy features and is widely used to provide a more dynamic and versatile aspect to the web pages being created.
If we try to explain the innerHTML simply then the work done by the innerHTML is simply to load the page content without refreshing the entire page. This saves the data usages as well as the time behind the page load and is pretty much easy to gain. This gives the user a very quick and responsive feel thus making the user experience much better.
It may sound a little difficult but let’s try to understand this with the help of an example.
Example:
<!DOCTYPE html>
<html>
<body>
<p id="paragraph1" onclick="myFunction()">Click here to change the innerHTML text.</p>
<script>
function myFunction() {
document.getElementById("paragraph1").innerHTML = "Paragraph changed!";
}
</script>
</body>
</html>Here in the above code, in the paragraph tag the id of that is paragraph1.
There is a function named myfunction() which would be revoked upon the click on the text “Click here to change innerHTML text”. When the function is revoked upon the click, the function gets executed which says getElementById(“paragraph1”), which stated the element with the Id as a demo is to be selected.
Further, we have the innerHTML function which simply means after the onclick what is to be done. Here in the above example, it is simply “Paragraph Changed”.
Below is the initial output of the above code.
Below is the changed output after the click.
Inner HTML with ordered or unordered list
Below is an example to show the use of innerHTML with ordered or unordered list.
Example:
<!DOCTYPE html>
<html>
<body>
<ul id="myList">
<li>Hello</li>
<li>Hello again</li>
</ul>
<p>Click the button below to get the content of the ul element.</p>
<button onclick="helloFunction()">Try it</button>
<p id="paragraph1"></p>
<script>
function helloFunction() {
var x = document.getElementById("myList").innerHTML;
document.getElementById("paragraph1").innerHTML = x;
}
</script>
</body>
</html>
Here the innerHTML gets triggered by the button defined by the name “Try it”.
The initial output of the above text is:
The output after the click on the button. The click on the button doesn’t lead to the reloading of the page but instead was due to the use of innerHTML.
InnerHTML for changing the URL
Below is another example that shows the use of innerHTML for changing the URL on the button click.
Example:
<!DOCTYPE html>
<html>
<body>
<a id="myAnchor" href="http://www.wikipedia.com">Wikipedia</a>
<button onclick="myFunction()">Change link</button>
<script>
function myFunction() {
document.getElementById("myAnchor").innerHTML = "Google";
document.getElementById("myAnchor").href = "https://www.google.com";
document.getElementById("myAnchor").target = "_blank";
}
</script>
</body>
</html>
The above example initially gives the link to the Wikipedia website but when the button is clicked the link changes to Google.
There are several such operations where innerHTML comes handy when the page is not to be reloaded and only a part is to be updated. This saves time, as well as fewer efforts, are to be made for the approach. The greatest advantage of innerHTML is the user experience which is enhanced with this feature.
Check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you Learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3).
Check out the Angular Course Online by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.
Got a question for us? Please mention it in the comments section of “String Concatenation in JavaScript” and we will get back to you.