In JavaScript, "innerText" and "textContent" are two properties that are used to access and modify the text content of an element on a web page.

The main difference between "innerText" and "textContent" is how they handle the visibility of elements and the rendering of styles.

• "textContent" retrieves the content of an element, including all text and nested elements, regardless of the style or visibility of the element. It returns the raw text content as a string.

• "innerText" retrieves the visible text content of an element, excluding text that is hidden with CSS or rendered as invisible due to its parent's visibility settings. It returns the formatted and styled text content.

Example:

javascript
 
 
Copy code
<div id="example">
  Hello <span style="display: none;">world</span>!
</div>

let element = document.getElementById("example");

console.log(element.textContent); // Output: Hello world!
console.log(element.innerText); // Output: Hello !

In the example above, the element with the id "example" contains a hidden span element with the text "world". Using "textContent" will return the complete text content, including the hidden text. However, using "innerText" will only return the visible text content, excluding the hidden text.

It's important to note that "innerText" is not supported in Firefox before version 45, while "textContent" is supported by all major browsers.

To update the content of an HTML document, you can use JavaScript to manipulate the HTML DOM (Document Object Model) through its properties and methods. Here's an example of how to change the text of an HTML element using JavaScript:

javascript
 
 
Copy code
// HTML
<p id="my-paragraph">Original text here</p>

// JavaScript
const paragraph = document.getElementById("my-paragraph");
paragraph.textContent = "New text here";

This code selects the paragraph element with the id "my-paragraph" and changes its text content to "New text here".

You can also use other DOM properties and methods to update HTML content, such as innerHTML, setAttribute, appendChild, etc. depending on what you want to achieve.

Here's a resource with more information on how to work with the DOM in JavaScript: https://www.w3schools.com/js/js_htmldom.asp

To change text when clicking in JavaScript, you can use the addEventListener() method to listen for a click event on the element, and update its text content using the textContent property.

Here's an example code snippet:

javascript
 
 
Copy code
// HTML
<p id="change-text">Click me to change the text!</p>

// JavaScript
const changeText = document.querySelector("#change-text");

changeText.addEventListener("click", function() {
  changeText.textContent = "Text has been changed!";
});

In this example, we first select the HTML element with the id of "change-text" using querySelector(). We then add a click event listener to it using addEventListener(). When the element is clicked, the function inside addEventListener() is triggered, and we update the element's text content using textContent.