Difference between innerText, innerHTML, and childNodes[].value?

Question

What is the difference between innerHTML, innerText and childNodes[].value in JavaScript?

Answer 1

The innerText property returns the actual text value of an html element while the innerHTML returns the HTML content. Example below:

var element = document.getElementById('hello');
element.innerText = ' hello world ';
console.log('The innerText property will not parse the html tags as html tags but as normal text:\n' + element.innerText);

console.log('The innerHTML element property will encode the html tags found inside the text of the element:\n' + element.innerHTML);
element.innerHTML = ' hello world ';
console.log('The  tag we put above has been parsed using the innerHTML property so the .innerText will not show them \n ' + element.innerText);
console.log(element.innerHTML);

 Hello world