JavaScript and JQuery Essentials Trainin... (56 Blogs) Become a Certified Professional
AWS Global Infrastructure

Front End Web Development

Topics Covered
  • AngularJS (29 Blogs)
  • jQuery UI Development (2 Blogs)
  • The Complete WebDeveloper (38 Blogs)
  • ReactJS (7 Blogs)
SEE MORE

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-widget-banner-bg

All You Need to Know About Inner HTML in JavaScript

Published on Oct 14,2019 49 Views

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

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 - inner html in javascript - edureka

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.

 

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.

 

output - inner html in javascript - edureka

 

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.

output - inner html in javascript - edureka

 

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). 

Got a question for us? Please mention it in the comments section of “String Concatenation in JavaScript” and we will get back to you.

Comments
0 Comments

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.