CODEWITHSUNDEEP
javascripthtmlinnertext
Biswajit Biswas
Biswajit Biswas

Reputation: 1045

Confused with javascript innerText property

I am getting confused with javascript innerText property. How does exactly it works?

  let h1 = document.querySelector('h1');
  console.log('Confused', h1);
  let h11 = document.querySelector('h1');
  console.log('Confused', h11);
  h1.innerText = 'Inserted';
  console.log('Got it', h1);

Upvotes: 2

Views: 95

Answers (1)

Nsoseka
Nsoseka

Reputation: 319

I think to understand what is happening, you can use this illustration run this snippet in your console

let h1 = document.querySelector('h1');
console.log('Confused', h1);
let h11 = document.querySelector('h1');
console.log('Confused', h11);
console.log('Got it', h1);

This is without the h1.innerText = 'Inserted'; and observe the values of the h1 and the h11.

and then run this

h1.innerText = 'Inserted';

And observe the values of the h1 and the h11 again in the console. You will realize that they have been updated to the same thing with innerText to be Inserted.

Now run this

let h1 = document.querySelector('h1');
console.log('Confused', h1);
let h11 = document.querySelector('h1');
console.log('Confused', h11);
h1.innerText = 'Inserted';
console.log('Got it', h1);

Observe that the final result is what you got after running h1.innerText = 'Inserted'; Now what is happening? JavaScript variables are containers for storing data values. You see variables are just containers for storing data. Before the line h1.innerText = 'Inserted'; comes up they had the content you expected them to have but when that line runs their content changes and you get what you are observing. The problem is that this happens so fast that you don't see the first versions of h1 and h11 and only see their updated versions, because in reality they are just containers for storing data and not data themselves, or you can refer to them as the name of a storage location

Upvotes: 0

Related Questions