by Sai gowtham

Difference between innerText and innerHTML in JavaScript

In this tutorial, we are going to learn about the difference bettween innerText and innerHTML properties in JavaScript.

innerText

The innerText property is used to sets or gets the text from an element.

Consider we have a p element with some text.

<p id="short">Welcome to happy world</p>

Now, if we call a innerText property on p element we will get the text present inside a <p> element.

const p = document.getElementById('short');

const text  = p.innerText;

// getting text
console.log(text); // Welcome to happy world

// setting new text
p.innerText = "you can see me";

innerHTML

The innerHTML property is used to sets or gets the html from an element.

Example:

<div id="box">
    <h1>My first post</h1>
    <p>Some text</p>
</div>

Now, if we call a innerHTML property on div element we will get the html present inside a <div> element.

const div = document.getElementById('box');

// getting Html
const html = div.innerHTML;
console.log(html);

Output:

"
    <h1>My first post</h1>
    <p>Some text</p>
"

Setting Html

We can replace the div element existing html content with a new html by setting the value of innerHTML.

const div = document.getElementById('box');

// setting Html
 div.innerHTML = `<h2>How to enjoy</h2>
                  <button>Click me</button>`

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2022 (Beginner + Advanced)
JavaScript - The Complete Guide 2022 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY